Estoy buscando desesperadamente una forma de pasar datos de un componente principal a un elemento secundario del componente secundario. Sé que puedo usar accesorios para hacer esto como en este hilo Vue JS Pasar datos de padre a hijo de niño de niño
Pero solo consigo que funcione para el componente secundario "siguiente" y me quedo atascado en el segundo.
Mi componente principal:
<ResultBar :carbondata="realCarbonValues" /> data() { return { realCarbonValues: { slabs: 20, beams: 0, columns: 0, foundation: 0, core: 0 } };Mi componente hijo:
props: { carbondata:Object }, console.log(this.carbondata.slabs)Ahora, puedo registrar los datos en la consola usando el componente secundario
Pero, ¿qué debo hacer en el siguiente componente secundario para pasar los datos correctamente?
dependiendo de lo que intente hacer, puede pasarlo directamente como accesorio nuevamente.
Padre:
<Child :prop-i-wanna-pass-deeply="something" />
Niño:
<GrandChild :props-i-wanna-pass-deeply-again="propsIWannaPassDeeply" />
Nieto:
<div>{{ propsIWannaPassDeeplyAgain }} is now here</div>
o simplemente use provide e inject para evitar la perforación de apoyo.
Consulte: https://vuejs.org/v2/api/#provide-inject
Lea la nota sobre la reactividad de provide/inject .
Padre:
<Child /> <!-- no need to pass the prop --> provide() { return { something: "fooAbc", } }Niño:
<GrandChild />
Nieto:
<div>{{ something }}</div> inject: ['something']