父/子组件VUE.JS 2.1.6数据传递

Question

我对如何正确地将组件绑定在一起感到非常困惑。 我在全球注册了两个组件：

Vue.component('product-welcome-component', {
    template: '#product-welcome-template',
    props: ['showModal'],
    onCreate(){
        showModal = false;
    } 

});

Vue.component('product-create-modal-component', {
    template: '#create-modal-template'   
});

在父级模板中，我包括了子级组件，如下所示：

<template id="product-welcome-template">
<div class="welcome-wrapper">
    <div class="purpose-title"><h1 class="welcome-text">Welcome to Product Hub</h1></div>
    <div class="purpose-create-btn"><button  @@click="showModal = true" class="btn btn-primary btn-success create-btn">Create New Product</button></div>
<product-create-modal-component v-if="showModal"></product-create-modal-component>
</div>
 </template>

问题是（其中之一）是我的create-modal-component始终显示，而不管showModal的值如何，实际上我可以放入v-if =“ 1 === 2”仍然显示。

我确定这不是注册父/子组件的正确方法，但是我似乎找不到合适的示例。 大多数情况下，我看到父级是应用程序实例，并且它具有“子级”组件的子级，然后他们可以进行通信。

我感觉在父级模板中包含子级组件是一种不好的做法，因为它会使父级强烈耦合。

任何帮助，将不胜感激，谢谢！

Answer 1

您正在使用showModal作为product-welcome-component道具，但是您尝试在created中将其设置为false，但是必须在created使用this来访问showModal ，如下所示：

Vue.component('product-welcome-component', {
    template: '#product-welcome-template',
    props: ['showModal'],
    onCreate(){
        this.showModal = false;
    } 

});

但是，您说的是product-create-modal-component也会显示v-if="1 === 2" ，但事实并非如此。您可以创建一个小提琴吗？