Vue.jsの親コンポーネントから子メソッドを実行

Question

現在、私は他のコンポーネントのリストを含むVue.jsコンポーネントを持っています。 vueを使って作業する一般的な方法は、データを子どもに渡し、子どもから親にイベントを発信することです。

しかし、この場合、親ののボタンをクリックすると、子コンポーネントでメソッドを実行します。それをする最善の方法はどれでしょうか？

Answer 1

提案する方法の1つはglobal event hubです。これにより、ハブにアクセスできるコンポーネント間の通信が可能になります。

イベントハブを使用して子コンポーネントのメソッドを起動する方法を示す例です。

var eventHub = new Vue(); 
 

 
Vue.component('child-component', { 
 
    template: "<div>The 'clicked' event has been fired {{count}} times</div>", 
 
    data: function() { 
 
    return { 
 
     count: 0 
 
    }; 
 
    }, 
 
    methods: { 
 
    clickHandler: function() { 
 
     this.count++; 
 
    } 
 
    }, 
 
    created: function() { 
 
    // We listen for the event on the eventHub 
 
    eventHub.$on('clicked', this.clickHandler); 
 
    } 
 
}); 
 

 
new Vue({ 
 
    el: '#app', 
 
    methods: { 
 
    clickEvent: function() { 
 
     // We emit the event on the event hub 
 
     eventHub.$emit('clicked'); 
 
    } 
 
    } 
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.3/vue.js"></script> 
 

 
<div id="app"> 
 
    <button @click="clickEvent">Click me to emit an event on the hub!</button> 
 
    <child-component></child-component> 
 
</div>

Answer 2

あなたの親コンポーネントのメソッドでヘルパーメソッドの下に作成することができます：私は

this.getChild('child-component-tag-name').childMethodName(arguments); 

：

getChild(name) { 
    for(let child of this.$children) if (child.$options.name==name) return child; 
}, 

を、このように子コンポーネントのメソッドを呼び出しますVue> = 2.0のためにそれをテストしないでください