Javascript 将数据传递给modal:Property/method props未定义&；TypeError:无法读取未定义的属性产品

我有一个产品清单，每个清单都包含一些信息和一个按钮。单击按钮（更多详细信息按钮）会打开一个模式窗口，其中包含特定产品（我使用道具将数据从父级传递给子级）的进一步信息。我有一个根组件（父：App.vue），在它下面我有一个产品列表组件（子：product_listing.vue）和一个vue中的模式窗口组件（孙子：modal_window.vue）。我想孩子和孙子也有亲子关系，因此我在这里使用了道具。我不断地发现这些错误：

属性或方法“props”未在实例上定义，但在渲染期间被引用。

[Vue warn]：v-on处理程序中的错误：“TypeError:无法读取未定义的属性“product”。

TypeError:无法读取未定义的属性“product”。

这就是我到目前为止所做的，我一直遵循这个例子：

父组件（Product\u listing.vue）

{{product.Name}
-{{product.Reduction_percentage}}
{{product.Short_Description}}
更多细节
Vue.组件（“模态窗口”{
模板：“#模态模板”，
道具：[“产品”，“开放”]
})
导出默认值{
数据（）{
返回{
showModal：错，
selectedProduct:未定义，
产品：[
{id:1，名称：'产品1'，减少百分比：30，简短描述：“某物”，描述：“更多”}，
{id:2，名称：'产品2'，减少百分比：33，简短描述：“某物”，描述：“更多”}，
{id:3，名称：'产品3'，减少百分比：23，简短描述：“某物”，描述：“更多的东西”}，
{id:4，名称：'产品4'，减少百分比：77，简短描述：“某物”，描述：“更多的东西”}，
{id:5，名称：'Product 5'，减少百分比：99，简短描述：“某物”，描述：“更多”}，
],
}
},
方法：{
选择产品（产品）{
this.selectedProduct=产品
this.showModal=true
}
}
}

子组件（Modal_window.vue）

{{product.Description}}
-{{product.Reduction_percentage}}
立即购买

试试这个：

// Product_listing.vue
// change the line by adding :product="product"
<div class="four">
    <b-btn id="show-modal" 
       class="more_details_button" 
       @click="selectProduct(product)" 
       :product="product">More details</b-btn>

//Product\u listing.vue
//通过添加：product=“product”更改行
更多细节

//Modal_window.vue
//添加脚本部分，使组件具有产品的道具条目

{{product.Description}}
-{{product.Reduction_percentage}}
立即购买
导出默认值{
道具：{
产品：{type:Object，默认值：null}
}
}

Hi，非常感谢您的回答！我成功地解决了错误并按照您所做的操作进行了操作，但是现在模式窗口没有打开，而且，我将我的问题从

Vue.component（'modal-component'，{…}）

修改为

Vue.component（'modal_window'，{…}）

对此表示抱歉。

<template id="modal-template">
<b-modal v-show="showModal" :product="selectedProduct" hide-footer="true" ok-title="Buy Now" size="lg" :title="product.Name">
            <div class = "inner-container">
                <div class = "inner-nested">
                    <div class="inner-one"><br> {{product.Description}}</div>
                    <div class="inner-two">
                        -{{ product.Reduction_percentage }}%</div>  
                    <div class="inner-three"> <button>Buy Now</button></div>
                </div>
            </div>
        </b-modal>
</template>

// Product_listing.vue
// change the line by adding :product="product"
<div class="four">
    <b-btn id="show-modal" 
       class="more_details_button" 
       @click="selectProduct(product)" 
       :product="product">More details</b-btn>

// Modal_window.vue
// add the script section so that the component has a props entry for product
<template id="modal-template">
<b-modal v-show="showModal" :product="selectedProduct" hide-footer="true" ok-title="Buy Now" size="lg" :title="product.Name">
            <div class = "inner-container">
                <div class = "inner-nested">
                    <div class="inner-one"><br> {{product.Description}}</div>
                    <div class="inner-two">
                        -{{ product.Reduction_percentage }}%</div>  
                    <div class="inner-three"> <button>Buy Now</button></div>
                </div>
            </div>
        </b-modal>
</template>
<script>
    export default {
        props: {
            product: { type: Object, default: null}
        }
    }
</script>