vue.js - parametros - pasar datos entre componentes vue js

VueJS accede a los datos del componente hijo desde el padre

Question

Estoy usando el andamio vue-cli para webpack

La estructura / jerarquía de componentes de mi Vue actualmente se parece a lo siguiente:

• Aplicación
  • Plantilla PDF
    • Fondo
    • Imagen de plantilla dinámica
    • Imagen de plantilla estática
    • Reducción

En el nivel de la aplicación, quiero un método de componente vuejs que pueda agregar todos los datos del componente secundario en un único objeto JSON que pueda enviarse al servidor.

¿Hay alguna forma de acceder a los datos del componente hijo? Específicamente, múltiples capas de profundidad?

Si no, ¿cuál es la mejor práctica para transmitir datos / parámetros observables, de modo que cuando los componentes secundarios los modifiquen, tenga acceso a los nuevos valores? Estoy tratando de evitar dependencias difíciles entre los componentes, por lo que a partir de ahora, lo único que se pasa con los atributos de los componentes son los valores de inicialización.

ACTUALIZAR:

Respuestas sólidas. Recursos que me parecieron útiles después de revisar ambas respuestas:

• Vuex y cuando usarlo.
• Solución alternativa de Vuex para aplicaciones más pequeñas.

Answer 1

¿Cuál es la mejor práctica para transmitir datos / parámetros observables, de modo que cuando sean modificados por componentes secundarios, tenga acceso a los nuevos valores?

El flujo de accesorios es un camino hacia abajo, un niño nunca debe modificar sus accesorios directamente.

Para una aplicación compleja, vuex es la solución, pero para un caso simple, vuex es una exageración. Al igual que lo que dijo @Belmin, incluso puedes usar un objeto JavaScript simple para eso, gracias al sistema de reactividad.

Otra solución es usar eventos. Vue ya ha implementado la interfaz EventEmitter, un hijo puede usar this.$emit(''eventName'', data) para comunicarse con su padre.

El padre escuchará en el evento de esta manera: ( @update es la taquigrafía de v-on:update )

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

y actualizar los datos en el controlador de eventos:

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

Aquí hay un ejemplo simple de eventos personalizados en Vue:
http://codepen.io/CodinCat/pen/ZBELjm?editors=1010

Esto es solo comunicación entre padres e hijos, si un componente necesita hablar con sus hermanos, entonces necesitará un bus de eventos global, en Vue.js, puede usar una instancia de Vue vacía:

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

Answer 2

Para este tipo de estructura es bueno tener algún tipo de tienda.

VueJS proporciona una solución para eso, y se llama Vuex. Si no está listo para usar Vuex, puede crear su propia tienda simple.

Vamos a intentar con esto

MarkdownStore.js

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

Y ahora puede utilizar esos datos en cualquier lugar, con la importación de este archivo de tienda

HomeView.vue

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

Ese es el flujo básico que podría usar, si no quiere ir con Vuex.