Vue.js Eltern Kind Kommunikation über Props und Events

Question

Hallo Ich bin relativly neu Vue.js und sofar Ich genieße die Arbeit mit ihm, aber heute bin ich zu kämpfen und ich habe nicht eine saubere Lösung für mein Problem gefunden .

Ich habe 9 Child.vue-Komponenten, die ich in einer v-for-Schleife erstellen, jede Child.vue enthält eine ContextMenu.vue-Komponente. Wenn ich auf eine Schaltfläche in Child.vue klicke, trigge ich dieses Kontextmenü auf. Alles funktioniert gut so.

Jetzt möchte ich nur ein Kontextmenü zu jedem Zeitpunkt angezeigt werden. Also dachte ich, ich emittiere ein Event an die Parent.vue etwas wie "menuIsShow" und verschicke in der Eltern ein Ereignis zu jedem Child.vue, um das Menü auszublenden. In dem einen Menü konnte ich es einfach auf sichtbar setzen.

this.$emit('contextMenuShown', true); 
this.showMenu(); 

Aber wie ich gelernt habe gibt es keinen $ Versand in Vue2 mehr. Also habe ich versucht, diese. $ Children in der Parent.vue zu verwenden, um eine Methode in jedem Child.vue auszulösen. Irgendwie funktionierte das auch nicht und ich denke, es muss eine bessere Lösung für dieses Problem geben, da Sie Requisiten benutzen sollten, um mit den Kindern zu kommunizieren. Aber das scheint mir in einer for-Schleife ziemlich hart zu sein. Es wäre auch möglich, einen globalen Event-Bus zu verwenden, aber ist das wirklich notwendig?

Best-Practice-Ratschläge zur Lösung dieses Problems?

Vielen Dank im Voraus robi

Answer 1

Vue haben one way data flow, so dass die Daten von Eltern auf das Kind über Requisiten geben werden kann. Sie können Ereignisse von Kind zum Elternteil wie dokumentiert ausgeben here

Aber vorausgesetzt, dass Sie viele Kind-Komponenten haben, werde ich empfehlen, eine zentrale Zustandsmaschine zu verwenden, und vuex ist ein schönes Beispiel dafür, das ist auch sehr beliebt in der Gemeinschaft.

Answer 2

In parent:

this.$children[index].$emit('contextMenuShown', true); 

Bei Kindern:

mounted() { 
    this.$on('contextMenuShown', function() { 
     // Do stuff 
    }); 
} 

Answer 3

Ich werde vorschlagen, dass Sie vue-clickaway verwenden. Dieses Projekt ist für diesen speziellen Fall, in dem Sie die Klicks außerhalb der Komponente anhören möchten.

Die Verwendung ist ziemlich einfach

import { mixin as clickaway } from 'vue-clickaway'; 

export default { 
    mixins: [ clickaway ], 
    template: '<p v-on-clickaway="away">Click away</p>', 
    methods: { 
     away: function() { 
     console.log('clicked away'); 
    }, 
    }, 
}; 

ich eine eventbus verwendet hatte, als ich so etwas auf eigene Faust zu tun hatte. Der Eventbus ist für solche Dinge geeignet, bei denen die Verwendung eines Zustands übertrieben sein könnte und das Emittieren von jeder Komponente ein Durcheinander verursachen könnte.

Answer 4

Vielen Dank für Ihre Hilfe. Ich habe am Ende eine Methode für jedes Kind aufgerufen. Ich denke, das ist der logischste Weg für mich (ich weiß, es gibt mehrere Möglichkeiten). Der Zugriff auf die Kinder ist nicht sehr praktisch, weil ich sie in 2 Nestet V-for-Schleife erzeuge. Nicht sehr elegant, aber es funktioniert.

var rows = this.$children[0].$children 
     for(var j = 0;j<rows.length;j++){ 
     var row = rows[j].$children; 
     for(var i = 0; i<row.length;i++){ 
     row[i].hideMenu(); 

     } 


     } 




    },