在Vue js中将数据从父组件传递给子组件

Question

我正在寻找一种将数据从父组件传递到子组件的子组件的方法。 我知道我可以使用道具来做到这一点，就像在这个线程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)

现在，我可以使用子组件在控制台中记录数据

但是我必须在下一个子组件中做什么才能正确传递数据？

Answer 1

根据您要执行的操作，您可以再次将其作为道具直接传递。

家长：

<Child :prop-i-wanna-pass-deeply="something" />

孩子：

<GrandChild :props-i-wanna-pass-deeply-again="propsIWannaPassDeeply" />

孙子：

<div>{{ propsIWannaPassDeeplyAgain }} is now here</div>

---

或者只使用provide 和inject 来避免螺旋钻。

见：https://vuejs.org/v2/api/#provide-inject

阅读有关提供/注入反应性的说明。

家长：

<Child /> <!-- no need to pass the prop -->

provide() {
  return {
    something: "fooAbc",
  }
}

孩子：

<GrandChild />

孙子：

<div>{{ something }}</div>

inject: ['something']