VueJS dziecku dostęp komponentu nadrzędnego

Question

Używam vue-cli scaffold for webpack

My Vue struktura składowa/heirarchy obecnie wygląda następująco:

• App
  • Szablon PDF
    • Tło
    • Szablon dynamiczny I Mage
    • statyczny szablon zdjęcie
    • Przecena

Na poziomie aplikacji, chcę vuejs metodę składnik, który może kruszywa Wszystkie dane komponentu podrzędnego do pojedynczego obiektu JSON, które mogą być wysłane na serwer.

Czy istnieje sposób dostępu do danych komponentu potomnego? W szczególności wiele warstw głębokich?

Jeśli nie, jaka jest najlepsza praktyka polegająca na przekazywaniu danych lub parametrów podlegających nadzorowi, aby po zmodyfikowaniu przez komponenty potomne miałem dostęp do nowych wartości? Próbuję uniknąć trudnych zależności między komponentami, więc od teraz jedyną rzeczą przekazaną przy użyciu atrybutów komponentów są wartości inicjalizacji.

UPDATE:

Stałe odpowiedzi. Zasoby znalazłem pomocny po zapoznaniu obie odpowiedzi:

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

Answer 1

Dla tego rodzaju konstrukcji dobrze jest mieć jakiś Store.

VueJS zapewnia rozwiązanie dla tego, i nazywa się Vuex. Jeśli nie jesteś gotowy, aby przejść z Vuex, możesz stworzyć swój własny prosty sklep.

Spróbujmy z tej

MarkdownStore.js

export default { 

data: { 
    items: [] 
}, 

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

fetchData() { 
    // fetch logic 
} 

} 

I teraz można używać tych danych wszędzie, z importem tego pliku Store

HomeView.vue

import MarkdownStore from '../stores/MarkdownStore' 

export default { 

data() { 
    sharedItems: MarkdownStore.data 
}, 

created() { 
    MarkdownStore.fetchData() 
} 

} 

To jest podstawowy przepływ, którego możesz użyć, Jeśli nie chcesz korzystać z Vuex.

Answer 2

jaka jest najlepsza praktyka polegająca na przekazywaniu możliwych do obserwacji danych/parametrów, tak aby po zmodyfikowaniu przez komponenty potomne miałem dostęp do nowych wartości?

Przepływ rekwizytów jest jednym sposobem w dół, dziecko nigdy nie powinno modyfikować swoich rekwizytów bezpośrednio.

Dla złożonej aplikacji, vuex jest rozwiązaniem, ale dla prostego przypadku vuex jest przesadą. Podobnie jak to, co powiedział @Belmin, można nawet użyć do tego zwykłego obiektu JavaScript, dzięki systemowi reaktywności.

Innym rozwiązaniem jest używanie zdarzeń. Vue już zaimplementował interfejs EventEmitter, dziecko może używać this.$emit('eventName', data) do komunikacji z rodzicem.

Rodzic będzie nasłuchiwać na razie tak: (@update jest skrótem od v-on:update)

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

i aktualizować dane w obsługi zdarzeń:

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

Oto prosty przykład niestandardowych wydarzeń w Vue:
http://codepen.io/CodinCat/pen/ZBELjm?editors=1010

To tylko rodzic-dziecko d komunikacji, jeśli składnik musi porozmawiać z jej rodzeństwa, wtedy trzeba będzie globalny autobus zdarzeń, w Vue.js, można po prostu użyć pustej instancji Vue:

const bus = new Vue() 

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

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