Vue.js 打开子组件VueJs中添加元素的模式

我有一个按钮，应该打开一个模式从一个孩子，这增加了一个新的客户

如果我只在父级中有代码，它就可以工作，但我尝试在子级中实现这一点

家长

<b-button @click="openModal">Add new customer</b-button>
<add-new-customer ref="modal" v-if="addCustomer"></add-new-customer>

openModal() {
   this.$refs.modal.openModalCh()
},

添加新客户
openModal（）{
这是。$refs.modal.openModalCh（）
},

儿童

<b-modal
        id="modal-prevent-closing"
        ref="modal"
        title="Add new customer"
        @ok="addCustomer"
>
...code..
</b-modal>
    <add-new-customer ref="modal" v-if="addCustomer" @added="onAddCustomer"></add-new-customer>
    addCustomer() {
       ..code for post a new customer..
    }
    openModal() {
       this.$refs.modal.openModalCh()
    },

…代码。。
addCustomer（）{
..新客户的邮政编码。。
}
openModal（）{
这是。$refs.modal.openModalCh（）
},

您可以通过将您的孩子作为组件注入到您的家长中来解决您的问题。例如，

您可以将

$attr

绑定到包含从父对象传递给子对象的所有属性的模态。在本例中，我们使用它作为ID

通过这种方式，您可以在父级中为模态提供一个ID，并使用该ID打开模态，而不使用ref

父母亲

开放模态
从“./components/addCustomerModel.vue”导入addCustomerModel
导出默认值{
名称：“应用程序”，
组成部分：{
addCustomerModel
}
};

AddCustomerModal.vue（子级）

导出默认值{
方法：{
addCustomer（）{
/*在这里插入逻辑*/
console.log（'Customer added！'）
}
}
}

它打开了，但@ok=“addCustomer”上出现错误，它没有到达那里。我现在在看，为什么。