如何在其他Vue组件中显示所选卡

如何解决如何在其他Vue组件中显示所选卡

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

<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>

以动态显示在此组件中：

<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",data() {
    return {
      isSelected: true
    };
  }
};
</script>

image preview