Ausführen einer untergeordneten Methode aus der übergeordneten Komponente in Vue.js

Question

Derzeit habe ich eine Vue.js-Komponente, die eine Liste anderer Komponenten enthält. Ich weiß, dass die übliche Art, mit vue zu arbeiten, darin besteht, Daten an Kinder weiterzuleiten und Ereignisse an Eltern von Kindern zu senden.

In diesem Fall möchte ich jedoch eine Methode in den untergeordneten Komponenten ausführen, wenn auf eine Schaltfläche im übergeordneten Element geklickt wird. Was wäre der beste Weg, es zu tun?

Answer 1

Eine vorgeschlagene Möglichkeit ist die Verwendung eines global event hub. Dies ermöglicht die Kommunikation zwischen beliebigen Komponenten, die Zugriff auf den Hub haben.

Hier ist ein Beispiel, das zeigt, wie ein Event-Hub verwendet werden kann, um eine Methode für eine untergeordnete Komponente auszulösen.

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

Sie können unter Hilfsmethode in Methoden in der Elternkomponente erstellen:

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

Und auf diese Weise untergeordnete Komponente Methode aufrufen:

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

I teste es nicht für Vue> = 2.0