如何将一个被点击的卡片的id和卡片内容传递给vue.js中的另一个组件？

// 点击事件处理函数
handleCardClick(cardId, cardContent) {
  // 将id和内容传递给父组件
  this.$emit('card-click', cardId, cardContent);
}

<!-- 父组件模板 -->
<template>
  <div>
    <child-component v-on:card-click="handleCardClick"></child-component>
    <!-- 其他内容 -->
  </div>
</template>

<script>
export default {
  methods: {
    // 事件处理函数
    handleCardClick(cardId, cardContent) {
      // 在这里可以处理传递过来的id和内容
      console.log(cardId, cardContent);
    }
  }
}
</script>

<!-- 子组件模板 -->
<template>
  <div>
    <!-- 其他组件内容 -->
    <button @click="handleClick">点击卡片</button>
  </div>
</template>

<script>
export default {
  props: {
    cardId: {
      type: Number,
      required: true
    },
    cardContent: {
      type: String,
      required: true
    }
  },
  methods: {
    handleClick() {
      // 点击事件触发时，调用父组件传递的点击事件处理函数，并传递id和内容
      this.$emit('card-click', this.cardId, this.cardContent);
    }
  }
}
</script>