Wykonywanie metody potomnej z komponentu nadrzędnego w Vue.js

Question

Obecnie mam składniki Vue.js, które zawierają listę innych składników. Wiem, że powszechnym sposobem pracy z Vue jest przekazywanie danych dzieciom i wydawanie wydarzeń rodzicom od dzieci.

Jednak w tym przypadku chcę wykonać metodę w komponentach podrzędnych po kliknięciu przycisku w obiekcie rodzic. Który byłby najlepszy sposób na zrobienie tego?

Answer 1

Jednym z sugerowanych sposobów jest użycie global event hub. Umożliwia to komunikację między dowolnymi komponentami, które mają dostęp do koncentratora.

Oto przykład pokazujący, w jaki sposób hub zdarzeń może być użyty do wywołania metody na komponencie potomnym.

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

Można tworzyć poniżej metody pomocnika w metodach w składniku dominującej:

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

I wywołać metodę komponentu dziecko w ten sposób:

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

I nie testuj go dla Vue> = 2.0