終於踏入Javascript框架之Vue..(8) 多層傳遞屬性

當我們專案越來越大拆成好幾項組件時，這時候資料的傳遞就沒那麼的直觀，就像是爸爸底下有兒子，兒子又有孫子，但爸爸的上面還有阿公，這時候阿公想給你壓歲錢可能會先被爸爸抽走。

屬性傳遞

當今天一個組件A，底下包含了B，B當中又包含了C，階層簡化如下：

ComponentA

--ComponentB

----ComponentC

一般來說需要一層一層傳遞：

1. ComponentA中有三個屬性:['A','B','C']打算給子組件使用
2. ComponentB也要傳遞props:['A','B','C']，如此ComponentC才能讀取

Provide

而如果使用provide，可以想像成只要在底下的子組件都能受到阿公的庇蔭，不用一個一個慢慢傳遞。

//ComponentA

provide:{

A:"",

B:"",...}

//ComponentB

inject:['A']

//ComponentC

inject:['C']

當provide中的內容非固定值，可以改為函數形式provide() {

return {

}}

如果我家多子多孫...?

那問題來了，如果今天是個大家庭，有阿公阿媽姑姑阿姨舅舅，還有你的堂表兄弟姊妹，今天姑姑想要給你一本書，該怎麼傳呢

這個且待後面分曉!