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

Question

我正在拼命寻找一种方法将数据从父组件传递到子组件的子组件。我知道我可以像在这个帖子中那样使用道具来做到这一点

但我只让它为“下一个”子组件工作，而我在第二个子组件上卡住了。

我的父组件：

<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

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

Parent:

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

Child:

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

盛大Child:

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

或者只使用 provide 和 inject 来避免 prop-drilling.

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

阅读有关 provide/inject 反应性的注释。

Parent:

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

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

Child:

<GrandChild />

盛大Child:

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

inject: ['something']

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

Pass data from parent component to child of child in Vue js

html

javascript

web-applications

vue.js