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

基本上有3种类别的组件通信：

对孩子的父母：Use Props
孩子对父母：Use emits
任何人：使用事件总线（不推荐）或添加 Vuex进入您的项目以处理您的应用状态

Answer 2

事件应该起作用，在列表组件中尝试类似以下操作：

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

在模态组件中

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

Answer 3

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

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

3 个答案: