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

我很困惑如何正确地将组件绑定在一起。我已经在全球注册了两个组件：父/子组件VUE.JS 2.1.6数据传递

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>

的问题是（其中之一）是我创造模态分量总是显示出来，不管showModal的值如何，实际上我可以放入v-if =“1 === 2”它仍然会显示。

我确定这不是注册父/子组件的正确方式，但我似乎无法找到合适的示例。大多数情况下，我看到的父母是应用程序实例，它有一个“孩子”组件的孩子，然后他们可以沟通。

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

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

来源

2017-01-27 Sóskuthy András

通过在父级模板中包含子组件，你的意思是什么？ – Saurabh

我的意思是这样的父模板：

–

您有showModal当道具product-welcome-component，而是你正试图将其设置为创建假的，但你必须使用createdthis访问showModal，像以下：

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

});

但是你说product-create-modal-component显示，即使你做v-if="1 === 2"，这不应该是你的情况你可以创建一个小提琴你的情况。

来源

2017-01-27 13:37:05 Saurabh

我将这样做一次，我回去工作，我设法通过其成分仅与VUE实例交谈来解决我的问题，现在，但我真的很喜欢他们在一起能够通过事件和道具在彼此之间进行沟通。该文档对该网站不是很有帮助。 –

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

回答

相关问题