Vue.js 如何在其他Vue组件中显示选定的卡

我想在卡片列表下方显示所选卡片。要显示data.js中的记录，我使用下面的组件。要显示我要在其他组件上显示的所选卡，我尝试在internet上搜索类似的问题解决方案，但找不到。请支持我

<template>
  <div class="container">
    <div
      class="main-section"
      v-for="(product, index) in products"
      :key="product.id"
      @click="setActive(index)"
      :class="{ active: activeIndex === index }"
    >
      <img :src="'/img/' + product.image" :alt="product.image" />
      <p>{{ product.brand }}</p>
      <h4>{{ product.title }}</h4>
      <span class="original-price"
        >{{ product.price.regularPrice }} {{ product.price.currency }}</span
      >
      <div class="discount-box">
        <span class="discount-price"
          >{{ product.price.finalPrice }} {{ product.price.currency }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "mainSection",
  props: ["products"],
  data() {
    return {
      activeIndex: undefined
    };
  },
  methods: {
    setActive(index) {
      this.activeIndex = index;
    }
  }
};
</script>

{{product.brand}}

{{product.title}}
{{product.price.regularPrice}{{{product.price.currency}}
{{product.price.finalPrice}{{{product.price.currency}}
导出默认值{
名称：“主要部分”，
道具：[“产品”]，
数据（）{
返回{
activeIndex：未定义
};
},
方法：{
设置活动（索引）{
this.activeIndex=index；
}
}
};

要在此组件中动态显示，请执行以下操作：

<template>
  <div class="selected-card">
    <div class="selected-product">
      <h2>Selected product</h2>
      <div class="main-section" v-if="isSelected">
        <img src="../data/images/3.webp" alt="product-img" />
        <p>Benjamin Berner Zurich</p>
        <h4>High-top Coconut boots</h4>
        <span class="original-price">249,00 €</span>
        <div class="discount-box">
          <span class="discount-price">209,00 €</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "selectedCard",
  props: ["products"],
  data() {
    return {
      isSelected: true
    };
  }
};
</script>

精选产品
苏黎世本杰明·伯纳

高帮椰子靴
249,00 €
209,00 €
导出默认值{
名称：“所选卡片”，
道具：[“产品”]，
数据（）{
返回{
是的
};
}
};