Vue.js - Zugriff auf Daten von der root-Instanz innerhalb der Komponente

9

Das scheint eine ziemlich grundlegende Frage zu sein, aber ich kann keine definitive (oder sogar funktionierende) Antwort finden.

Ich habe meine Root-Instanz:

%Vor%

Und ich habe eine separate Komponente, in der ich die Ereignisse auflisten möchte, die in der Root-Instanz gespeichert sind. Im Moment sieht es so aus:

%Vor%

Das scheint nicht zu funktionieren. Ich habe auch this.$root.events vergeblich versucht. Was ist der richtige Weg? Bedenken Sie, dass ich die Daten von der Wurzel referenzieren und keine Kopie mit einem eigenen Bereich erstellen möchte.

EDIT: versuchen, Requisiten zu verwenden, hier ist die Liste Komponente, die auch nicht funktioniert:

%Vor%     
Chris 01.03.2016, 12:58
quelle

2 Antworten

3

Mit props können Sie problemlos die gleichen Daten von übergeordneten an untergeordnete Elemente übergeben. Da ich nicht weiß, wie Sie die Root-Instanz und EventList miteinander verknüpft haben, gehe ich davon aus, dass Sie sie als globale Komponente registriert haben.

In der Dokumentation steht:

  

Beachten Sie, dass wenn die übermittelte Stütze ein Objekt oder ein Array ist, sie als Referenz übergeben wird. Das Mutieren des Objekts oder des Arrays selbst innerhalb des Childs wirkt sich auf den übergeordneten Status aus, unabhängig vom verwendeten Bindungstyp.

Sie werden also das gleiche Objekt in allen Ihren Komponenten verwenden, wenn Sie es als Requisite übergeben.

%Vor%

Ereignisliste:

%Vor%

In der Root-Vue-Instanzvorlage können Sie die Root-Vue-Instanzen events als eine Eigenschaft mit dem Namen events in der untergeordneten Komponente übergeben:

%Vor%     
nils 01.03.2016, 13:24
quelle
1

Dafür gibt es "Props":

Ссылка

Ich übergebe ein Objekt / Array als Prop (was Ihre events Daten sicher sein werden), es wird automatisch in zwei Richtungen synchronisiert - Ereignisse im Kind ändern, sie werden im Elternteil geändert.

Wenn Sie einfache Werte (Strings, Zahlen - zB nur event.name) über Requisiten übergeben, müssen Sie explizit den Modifikator .sync verwenden: Ссылка

    
Linus Borg 01.03.2016 13:11
quelle

Tags und Links