[英]Pass data from child to parent and to another child component React Js
[英]Pass data from parent component to child of child in Vue js
我正在寻找一种将数据从父组件传递到子组件的子组件的方法。 我知道我可以使用道具来做到这一点,就像在这个线程Vue JS Pass Data From Parent To Child Of Child Of Child
但是我只让它为“下一个”子组件工作,而我被第二个子组件卡住了。
我的父组件:
<ResultBar :carbondata="realCarbonValues" />
data() {
return {
realCarbonValues: {
slabs: 20,
beams: 0,
columns: 0,
foundation: 0,
core: 0
}
};
我的子组件:
props: {
carbondata:Object
},
console.log(this.carbondata.slabs)
现在,我可以使用子组件在控制台中记录数据
但是我必须在下一个子组件中做什么才能正确传递数据?
根据您要执行的操作,您可以再次将其作为道具直接传递。
家长:
<Child:prop-i-wanna-pass-deeply="something" />
孩子:
<GrandChild:props-i-wanna-pass-deeply-again="propsIWannaPassDeeply" />
孙子:
<div>{{ propsIWannaPassDeeplyAgain }} is now here</div>
或者只是使用provide
和inject
来避免螺旋钻。
参见: https://v2.vuejs.org/v2/api/#provide-inject
阅读有关提供/注入反应性的说明。
家长:
<Child /> <!-- no need to pass the prop -->
provide() {
return {
something: "fooAbc",
}
}
孩子:
<GrandChild />
孙子:
<div>{{ something }}</div>
inject: ['something']
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.