在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://v2.vuejs.org/v2/api/#provide-inject

閱讀有關提供/注入反應性的說明。

家長：

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

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

孩子：

<GrandChild />

孫子：

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

inject: ['something']