Vue Komponenten Kommunikation

Question

ich zwei Vue Komponenten:

Vue.component('A', {}); 

Vue.component('B', {}); 

Wie kann ich auf die Komponente A von der Komponente B? Wie funktioniert die Kommunikation zwischen den Komponenten?

Answer 1

Cross-Komponenten-Kommunikation wird nicht viel Aufmerksamkeit in den Vue.js Dokumente, noch gibt es viele Tutorials, die dieses Thema abdecken. Da Komponenten isoliert sein sollten, sollten Sie niemals direkt auf eine Komponente "zugreifen". Dies würde die Komponenten fest miteinander verbinden, und das ist genau das, was Sie verhindern wollen.

Javascript hat eine ausgezeichnete Methode für die Kommunikation: Ereignisse. Vue.js hat ein eingebautes Ereignissystem, das hauptsächlich für die Eltern-Kind-Kommunikation verwendet wird. From the docs:

Obwohl Sie direkt eine Vue Instanz für Kinder und Eltern zugreifen können, ist es bequemer, die integrierte Ereignissystem für komponentenübergreifende Kommunikation zu verwenden. Es macht auch Ihren Code weniger gekoppelt und einfacher zu pflegen. Sobald eine Eltern-Kind-Beziehung eingerichtet wurde, können Sie Ereignisse mithilfe der Ereignisinstanzmethoden jeder Komponente auslösen und auslösen.

Ihr Beispielcode das Ereignissystem zu veranschaulichen:

var parent = new Vue({ 
    template: '<div><child></child></div>', 
    created: function() { 
    this.$on('child-created', function (child) { 
     console.log('new child created: ') 
     console.log(child) 
    }) 
    }, 
    components: { 
    child: { 
     created: function() { 
     this.$dispatch('child-created', this) 
     } 
    } 
    } 
}).$mount() 

Dan Holloran ein Stück auf seinem "Kampf" mit komponentenübergreifende Messaging vor kurzem geschrieben hat, in twopieces. Dies kann hilfreich sein, wenn Sie eine Kommunikation zwischen Komponenten benötigen, die keine Eltern-Kind-Beziehung haben. Ein anderer Ansatz, mit dem ich Erfahrung habe (abgesehen von der Verwendung von Ereignissen für die Kommunikation), ist die Verwendung einer zentralen Komponentenregistrierung, die einen Verweis auf die öffentliche API enthält, an die eine Instanz einer Komponente gebunden ist. Die Registrierung verarbeitet Anforderungen für eine Komponente und gibt ihre öffentliche API zurück.

Im Kontext von Vue.js würden Ereignisse von meiner Waffe der Wahl sein.

Answer 2

Zusätzlich zu Pesla 'Antwort werfen Sie einen Blick auf die Anleitung State Management section under Building large scale apps: http://vuejs.org/guide/application.html#State_Management. Ich habe eine jsfiddle basierend auf diesem hier erstellt: https://jsfiddle.net/WarwickGrigg/xmpLg92c/.

Diese Technik funktioniert für Komponenten zu: Eltern-Kind, Geschwister-Geschwister Komponentenbeziehungen usw.

var hub = { 
    state: { 
    message: 'Hello!' 
    } 
} 

var vmA = new Vue({ 
    el: '#appA', 
    data: { 
     pState: { 
     dA: "hello A" 
    }, 
    hubState: hub.state 
    } 
}) 

var vmB = new Vue({ 
    el: '#appB', 
    data: { 
     pState: { 
     dB: "hello B" 
    }, 
    hubState: hub.state 
    } 
}) 

Answer 3

Kommunikation zwischen den Komponenten kann auch durch die Schaffung eines einzigen globalen Ereignis-Hubs in Ihrer Vue Anwendung eingerichtet werden. Etwas wie folgt aus: -

var bus = new Vue();

Jetzt können Sie benutzerdefinierte Ereignisse erstellen und diese von jedem Bauteil hören.

 // A.vue 
    // ... 
    doThis() { 
     // do the job 

     bus.$emit('done-this'); 
    } 

    // B.vue 
    // ... 
     method:{ 
      foo: function() 
      } 
    created() { 
     bus.$on('done-this', foo); 
    } 

Mehr dazu finden Sie from official documentation. finden.