vue元件巢狀之 - 父元件向子元件傳值

父元件向子元件傳值步驟：

在這裡先定義一下，相對本案例來說：App.vue是父元件，Second-module.vue是子元件。

一、首先，值肯定是定義在父元件中的，供所有子元件共享。所以要在父元件的data中定義值：

二、其次，父元件要和子元件有契合點：就是在父元件中呼叫、註冊、引用子元件：

　　呼叫：

    　註冊：

　　引用：

三、接下來，就可以在父元件和子元件連結的地方（即引用子元件的標籤上），把父元件的值繫結給子元件：

這裡我繫結了兩個值，一個是陣列，一個是字串。

(特別補充：)

我在寫完文章後很長一段時間沒再接觸vue，再上手開始寫demo的時候，出現了不少不怎麼被注意的小問題，其中一點和這裡有關，進行補充，特別注意：

總的來說父傳子就是這三個步驟：父元件中定義值、呼叫子元件並引用、在引用的標籤上給子元件傳值。

但是注意是要用 v-bind: 繫結要傳的值，不用v-bind直接把值放到標籤上，會被當成html的節點屬性解析的。

四、最後，子元件內部肯定要去接受父元件傳過來的值：props（小道具）來接收：

五、這樣，子元件內部就可以直接使用父元件的值了。

但是有要注意的點：

子元件接受的父元件的值分為——引用型別和普通型別兩種，

普通型別：字串（String）、數字（Number）、布林值（Boolean）、空（Null）

引用型別：陣列（Array）、物件（Object）

其中，普通型別是可以在子元件中更改，不會影響其他兄弟子元件內同樣呼叫的來自父元件的值，

但是，引用型別的值，當在子元件中修改後，父元件的也會修改，那麼後果就是，其他同樣引用了改值的子元件內部的值也會跟著被修改。除非你有特殊的要求這麼去做，否則最好不要這麼做。

父元件傳給子元件的值，在子元件中千萬不能修改，因其資料是公用的，改了所有引用的子元件就都改了。

先看一個效果頁面：

左邊的列表欄是引用父元件值的第一個子元件，右邊是引用了同樣值的第二個子元件，他們都有一樣的資訊：

開發工具中看也是明顯的6條資料：

注意對比看最後一條資料: 點選右邊區域第一個藍色按鈕後，就少了一組資料，當然是兩邊同時少的。

同樣看開發工具中，App元件的資料是少了一條的。

但是傳遞的是字串、數字、布林值的時候，在一個元件中修改就不會影響到其他元件的資訊。就沒有關係。

我點選第二個藍色按鈕，，就只有第二個子元件裡的title改變了，第一個的元件沒有變動

嘗試過後，值確實改了，但是vue給我彈出了一個警告：

警告:避免直接對一個道具進行修改，因為當父元件重新呈現時，該值將被覆蓋。相反，使用基於支柱的資料或計算屬性。

總結：

你可以這麼理解：傳值就是複製過去了一個值的副本，副本是可以自己隨便改的，但是引用是複製了個快捷方式，是一個指標，他們用的都是父元件中的那一個。

其實理解了js的原型鏈和麵向物件原理後就不難理解這個：

把子元件想象成父元件的例項，那麼有可能父元件引用屬性的值（即方法），都是在父元件的原型上的。然後其他子元件，共享這一個在父元件原型上的引用值，所以牽一髮而動全身。

（父元件原型：我習慣將其想象成爺爺的身份，建構函式是爸爸，例項是孫子，孫子一切都來自於爺爺，比如說形式。。扯遠了）

但是父元件傳給子元件的值，就像是建構函式中建立的屬性一樣，是由父元件（爸爸）拿著的。

所以當子元件（孫子們）自立門戶（被建立）的時候，父元件將值一人給了一份（爸爸的家產分給了每一個孩子）。那麼子元件在自己家裡改動，不會影響同用這個屬性的兄弟元件家裡的值的。

最後說明：純屬個人為了理解時胡亂連線的關係，不是真正的就是這樣的，不要太在意。。

不貼原始碼的講解就是耍流氓！

父元件App.vue原始碼：

import Header from'./components/Header'import Footer from'./components/Footer'import Navbar from'./components/Navbar'import Content from'./components/Content'import Firstmodule from'./components/First-module'import Secondmodule from'./components/Second-module'export default{name:'app',data(){return{newlists:[{title:"Vue-初識Vue及引入CDN",time:"2017/08/15"},{title:"Vue-例項化Vue物件",time:"2017/08/15"},{title:"Vue-資料和方法",time:"2017/08/15"},{title:"Vue-屬性繫結",time:"2017/08/15"},{title:"Vue-事件(點選:雙擊:滑鼠事件)",time:"2017/08/15"},{title:"Vue-鍵盤事件及鍵值修飾符(alt:enter)",time:"2017/08/15"}],secondlist:"我是父元件傳給第二個子元件的文字"}},components:{"app-header":Header,"app-footer":Footer,'app-nav':Navbar,"app-cont":Content,"first-module":Firstmodule,"second-module":Secondmodule}}

我天，這個程式碼格式貼的我受不了，乾脆壓縮再貼吧。

子元件Second-module.vue原始碼：見下一篇文章底部。