VueインスタンスからVue.componentにデータを渡すにはどうすればいいですか？

Question

私は2つのコンポーネントを持つVueインスタンスを持っています。ユーザーが2番目のコンポーネントのボタンをクリックすると、最初のテンプレートのテンプレートを非表示にします。このスクリプトコードで

<div id="app"> 
    <mycomp-one :active="active"></mycomp-one> 
    <mycomp-two></mycomp-two> 
</div> 

<template id="mycomponent-one"> 
    <div v-show="!active"> 
     <!-- ... ---> 
    </div> 
</template> 

<template id="mycomponent-two"> 
    <button v-on:click="setActive">Click Me</button> 
</template> 

：

Vue.component('mycomp-one', { 
    template: '#mycompnent-one', 
    // etc... 
}); 
Vue.component('mycomp-two', { 
    template: '#mycomponent-two', 
    data: function() { 
     return { 
      active: false 
     }; 
    }, 
    methods: { 
     setActive: function() { 
      this.$parent.$options.methods.setActive(); 
     }, 
    }, 
}); 
new Vue({ 
    el:'#app', 
    data:{ 
     active: false 
    }, 
    methods: { 
     setActive: function() { 
      this.active = !this.active; 
     }, 
    }, 
}); 

ボタンがインスタンスへのコンポーネントからの情報を渡すために良い取り組んで、それをクリックすると

私はこのコードを持っています。しかし、ここではデータフローを停止していますが、mycomp-oneコンポーネントは変更を取得しませんでした。どうすれば修正できますか？アクティブな場合はmycomp-oneを非表示にしたい

Answer 1

this.$parent.$options.methods.setActive()は、Vueにバインドされたメソッドではありません。どうやってここに来たのか分かりませんが、これは親のメソッドを呼び出す方法ではありません。その向こう

console.clear() 
 
Vue.component('mycomp-one', { 
 
    props:["active"], 
 
    template: '#mycomponent-one', 
 
}); 
 
Vue.component('mycomp-two', { 
 
    template: '#mycomponent-two', 
 
    data: function() { 
 
     return { 
 
      active: false 
 
     }; 
 
    }, 
 
    methods: { 
 
     setActive: function() { 
 
      this.$parent.setActive(); 
 
     }, 
 
    }, 
 
}); 
 
new Vue({ 
 
    el:'#app', 
 
    data:{ 
 
     active: false 
 
    }, 
 
    methods: { 
 
     setActive: function() { 
 
      this.active = !this.active; 
 
     }, 
 
    }, 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 
 
<div id="app"> 
 
    <mycomp-one :active="active"></mycomp-one> 
 
    <mycomp-two></mycomp-two> 
 
</div> 
 

 
<template id="mycomponent-one"> 
 
    <div v-show="!active"> 
 
     Stuff 
 
    </div> 
 
</template> 
 

 
<template id="mycomponent-two"> 
 
    <button v-on:click="setActive">Click Me</button> 
 
</template>

、コンポーネントがその親のメソッドを呼び出すべきではありません。彼らは、親が聞いているイベントを発するべきです。これはdocumentationでよくカバーされています。

console.clear() 
 
Vue.component('mycomp-one', { 
 
    props:["active"], 
 
    template: '#mycomponent-one', 
 
}); 
 
Vue.component('mycomp-two', { 
 
    template: '#mycomponent-two', 
 
    data: function() { 
 
     return { 
 
      active: false 
 
     }; 
 
    }, 
 
    methods: { 
 
     setActive: function() { 
 
      this.active = !this.active 
 
      this.$emit("set-active", this.active) 
 
     }, 
 
    }, 
 
}); 
 
new Vue({ 
 
    el:'#app', 
 
    data:{ 
 
     active: false 
 
    }, 
 
    methods: { 
 
     setActive: function() { 
 
      this.active = !this.active; 
 
     }, 
 
    }, 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.js"></script> 
 
<div id="app"> 
 
    <mycomp-one :active="active"></mycomp-one> 
 
    <mycomp-two @set-active="active = $event"></mycomp-two> 
 
</div> 
 

 
<template id="mycomponent-one"> 
 
    <div v-show="!active"> 
 
     Stuff 
 
    </div> 
 
</template> 
 

 
<template id="mycomponent-two"> 
 
    <button v-on:click="setActive">Click Me</button> 
 
</template>