父/子組件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" ，但事實並非如此。您可以創建一個小提琴嗎？