VueJS Zugang Kind Komponente Daten von den Eltern

Question

Ich verwende die vue-cli scaffold for webpack

Meine Vue Komponentenstruktur/Hierarchie sieht derzeit wie folgt aus:

• App
  • PDF-Vorlage
    • Hintergrund
    • Dynamische Vorlage I mage
    • Static Template Bild
    • Markdown

Auf der App-Ebene, ich möchte eine vuejs Komponentenmethode, die alle untergeordneten Komponente Daten in einem einzigen JSON-Objekt aggregieren kann das kann an den Server gesendet werden.

Gibt es eine Möglichkeit untergeordnete Komponente die Daten zugreifen? Genauer gesagt, mehrere Ebenen tief?

Wenn nicht, was ist die beste Vorgehensweise für die Weitergabe von beobachtbaren Daten/Parametern, so dass ich, wenn es von untergeordneten Komponenten geändert wird, Zugriff auf die neuen Werte habe? Ich versuche, harte Abhängigkeiten zwischen den Komponenten zu vermeiden, so dass im Moment nur die Initialisierungswerte mit den Komponentenattributen übergeben werden.

UPDATE:

Solide Antworten. Ressourcen, die ich gefunden hilfreich, nachdem beide Antworten bewerten:

• VueX and when to use it
• VueX alternative solution for smaller apps

Answer 1

Für diese Art von Struktur Es ist gut, eine Art von Store zu haben.

VueJS bieten Lösung für das, und es heißt Vuex.If Sie nicht bereit sind, mit Vuex zu gehen, können Sie Ihre eigenen einfachen Speicher erstellen können.

Lassen Sie uns versuchen, mit diesem

MarkdownStore.js

export default { 

data: { 
    items: [] 
}, 

// Methods that you need, for e.g fetching data from server etc. 

fetchData() { 
    // fetch logic 
} 

} 

Und jetzt können Sie diese Daten überall verwenden, mit dem Import dieser Datei speichern

HomeView.vue

import MarkdownStore from '../stores/MarkdownStore' 

export default { 

data() { 
    sharedItems: MarkdownStore.data 
}, 

created() { 
    MarkdownStore.fetchData() 
} 

} 

Das ist also der grundlegende Fluss, den Sie verwenden könnten, wenn Sie nicht mit Vuex gehen wollen.

Answer 2

was ist die beste Praxis beobachtbaren Daten/Parameter für die Weitergabe nach unten, so dass, wenn es von untergeordneten Komponenten modifiziert ist ich Zugriff auf die neuen Werte haben?

Der Fluss der Requisiten ist ein Weg nach unten, ein Kind sollte seine Requisiten niemals direkt modifizieren.

Für eine komplexe Anwendung ist vuex die Lösung, aber für einen einfachen Fall ist vuex ein Overkill. Genau wie es @Belmin gesagt hat, können Sie dank des Reaktivitätssystems sogar ein einfaches JavaScript-Objekt dafür verwenden.

Eine andere Lösung verwendet Ereignisse. Vue hat bereits die EventEmitter-Schnittstelle implementiert, ein Kind kann this.$emit('eventName', data) verwenden, um mit seinem Elternteil zu kommunizieren.

Die Eltern auf der Veranstaltung hören wie folgt aus: (@update ist eine Abkürzung von v-on:update)

<child :value="value" @update="onChildUpdate" /> 

und die Daten in der Ereignisbehandlungsroutine aktualisiert:

methods: { 
    onChildUpdate (newValue) { 
    this.value = newValue 
    } 
} 

Hier ist ein einfaches Beispiel von benutzerdefinierten Ereignissen in Vue:
http://codepen.io/CodinCat/pen/ZBELjm?editors=1010

Dies ist nur Eltern-Kind d Kommunikation, wenn eine Komponente benötigt, um seine Geschwister zu sprechen, dann müssen Sie ein globales Ereignis Bus, in Vue.js, kann man einfach eine leere Vue Instanz verwenden:

const bus = new Vue() 

// In component A 
bus.$on('somethingUpdated', data => { ... }) 

// In component B 
bus.$emit('somethingUpdated', newData)