VueJS accede ai dati del componente figlio dal genitore

Sto usando lo scaffold vue-cli per il webpack

La struttura / gerarchia del mio Vue al momento ha il seguente aspetto:

  • App
    • Modello PDF
      • sfondo
      • Immagine modello dynamic
      • Immagine statica del modello
      • riduione di prezzo

A livello di app, voglio un metodo di componente vuejs in grado di aggregare tutti i dati del componente figlio in un singolo object JSON che può essere inviato al server.

C’è un modo per accedere ai dati del componente figlio? Nello specifico, più livelli sono profondi?

In caso contrario, qual è la procedura migliore per trasmettere dati / parametri rispettabili, in modo che quando viene modificato dai componenti figlio, possa accedere ai nuovi valori? Sto cercando di evitare le forti dipendenze tra i componenti, quindi al momento, l’unica cosa che viene trasmessa utilizzando gli attributi dei componenti sono i valori di inizializzazione.

AGGIORNARE:

Risposte solide. Risorse che ho trovato utili dopo aver esaminato entrambe le risposte:

  • VueX e quando usarlo
  • VueX soluzione alternativa per le app più piccole

Per questo tipo di struttura è bello avere una specie di negozio.

VueJS fornisce una soluzione per questo, e si chiama Vuex. Se non sei pronto per andare con Vuex, puoi creare il tuo negozio semplice.

Proviamo con questo

MarkdownStore.js

export default { data: { items: [] }, // Methods that you need, for eg fetching data from server etc. fetchData() { // fetch logic } } 

E ora puoi usare quei dati ovunque, con l’importazione di questo file Store

HomeView.vue

 import MarkdownStore from '../stores/MarkdownStore' export default { data() { sharedItems: MarkdownStore.data }, created() { MarkdownStore.fetchData() } } 

Quindi questo è il stream di base che potresti usare, se non vuoi andare con Vuex.

qual è la procedura migliore per trasmettere dati / parametri rispettabili, in modo tale che quando viene modificato dai componenti figlio ho accesso ai nuovi valori?

Il stream di oggetti di scena è a senso unico, un bambino non dovrebbe mai modificare direttamente i suoi oggetti di scena.

Per un’applicazione complessa, vuex è la soluzione, ma per un caso semplice vuex è un eccessivo. Proprio come ha detto @Belmin, grazie al sistema di reattività è persino ansible utilizzare un semplice object JavaScript.

Un’altra soluzione sta usando gli eventi. Vue ha già implementato l’interfaccia EventEmitter, un bambino può usarlo this.$emit('eventName', data) per comunicare con il suo genitore.

Il genitore ascolterà sull’evento in questo modo: ( @update è la scorciatoia di v-on:update )

  

e aggiorna i dati nel gestore eventi:

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

Ecco un semplice esempio di eventi personalizzati in Vue:
http://codepen.io/CodinCat/pen/ZBELjm?editors=1010

Questa è solo comunicazione genitore-figlio, se un componente ha bisogno di parlare con i suoi fratelli, allora avrai bisogno di un bus eventi globale, in Vue.js, puoi semplicemente usare un’istanza Vue vuota:

 const bus = new Vue() // In component A bus.$on('somethingUpdated', data => { ... }) // In component B bus.$emit('somethingUpdated', newData)