如何通过单击另一个vue组件中包含的按钮来获取vue组件的内容（模式窗口）？

Question

我正在尝试将基本的Vue应用程序分类为组件。我有一个产品清单，每个清单包含一些信息和一个按钮。单击按钮（更多详细信息按钮）会打开一个模式窗口，其中包含该特定产品的更多信息。我在Vue中有一个产品列表组件和一个模式窗口组件。我不确定如何在用户单击按钮时从产品列表中调用包含特定产品信息的模式窗口组件。我希望对此有所帮助。这是我到目前为止所拥有的：

产品清单组件

<template>
    <div class="content">
        <div class="nested" v-for="product in products">
            <div class="one"><span>{{product.Name}}</span></div>
            <div class="two"><img src="src/assets/shape.svg" style="height: 80px; width: 80px;"><span>-{{ product.Reduction_percentage }}%</span></div>       
            <div class="three"><span>{{ product.Short_Description }}</span></div>
            <div class="four"><b-btn v-b-modal="'productModal'" @click="chooseProduct(product)" product_item="'product'">More details</b-btn></div>
        </div>
    </div>
</template>

<script>
export default {
  data () {
    return {
        products: [
              {id: 1, Name: 'Product 1', Reduction_percentage: 30, Short_Description:"Something", Description:"Something more"},
              {id: 2, Name: 'Product 2', Reduction_percentage: 33, Short_Description:"Something", Description:"Something more"},
              {id: 3, Name: 'Product 3', Reduction_percentage: 23, Short_Description:"Something", Description:"Something more"},
              {id: 4, Name: 'Product 4', Reduction_percentage: 77, Short_Description:"Something", Description:"Something more"},
              {id: 5, Name: 'Product 5', Reduction_percentage: 99, Short_Description:"Something", Description:"Something more"},
          ]
    }
  },
methods: {
            chooseProduct: function (product) {
            this.chosenProduct = product
        },
}
</script>

模态窗口组件

<template>
<b-modal id="productModal" v-if="chosenProduct" :title="chosenProduct.Name">
            <div class = "inner-container">
                <div class = "inner-nested">
                    <div class="inner-one"><br> {{chosenProduct.Description}}</div>
                    <div class="inner-two">
                        -{{ chosenProduct.Reduction_percentage }}%</div>  
                    <div class="inner-three"> <button>Buy Now</button></div>
                </div>
            </div>
        </b-modal>
</template>

Answer 1

事件应该起作用，在列表组件中尝试类似的事情：

this.$root.$emit('open-modal', chosenProduct)

在模态组件中

this.$root.$on('open-modal', (chosenProduct) => {
  // open modal...
})

Answer 2

基本上有3类组件通信：

1. 对孩子的父母：Use Props

2. 孩子到父母：Use emits

3. 任何内容：使用事件总线（不推荐）或添加Vuex到您的项目以处理您的应用程序状态

Answer 3

要将数据传递到另一个组件，您可以使用道具。在vue的官方文档中阅读它