vue組件之間互相傳值：父傳子，子傳父

1、父組件向子組件傳值步驟

例1：轉：http://www.javashuo.com/article/p-sjgopqfy-ke.html

1.建立子組件，在src/components/文件夾下新建一個Child.vue
2.Child.vue的中建立props，而後建立一個名爲message的屬性

3.在App.vue中註冊Child組件，並在template中加入child標籤，標籤中添加message屬性並賦值

4.保存修改的文件，查看瀏覽器

5.以上，不用v-bind直接把值放到標籤上，會被當成html的節點屬性解析的，而hello就是須要傳給子組件的值。

固然，咱們依然能夠對message的值進行v-bind動態綁定：

 

此時瀏覽器中

父組件向子組件傳值成功
總結一下：

• 子組件在props中建立一個屬性，用以接收父組件傳過來的值
• 父組件中註冊子組件
• 在子組件標籤中添加子組件props中建立的屬性
• 把須要傳給子組件的值賦給該屬性

例2：

轉：http://www.javashuo.com/article/p-qithlxit-u.html

1）首先，值確定是定義在父組件中的，供全部子組件共享。因此要在父組件的data中定義值

2）其次，父組件要和子組件有契合點：就是在父組件中調用、註冊、引用子組件：

調用：

註冊：

引用：

 

3）接下來，就能夠在父組件和子組件連接的地方（即引用子組件的標籤上），把父組件的值綁定給子組件：

 

 

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

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

4）最後，子組件內部確定要去接受父組件傳過來的值：props（小道具）來接收：

 

 5）這樣，子組件內部就能夠直接使用父組件的值了。

 

Tip:

子組件接受的父組件的值分爲——引用類型和普通類型兩種，

普通類型：字符串（String）、數字（Number）、布爾值（Boolean）、空（Null）

引用類型：數組（Array）、對象（Object）

其中，普通類型是能夠在子組件中更改，不會影響其餘兄弟子組件內一樣調用的來自父組件的值，

可是，引用類型的值，當在子組件中修改後，父組件的也會修改，那麼後果就是，其餘一樣引用了改值的子組件內部的值也會跟着被修改。除非你有特殊的要求這麼去作，不然最好不要這麼作。

 

 

2、子組件向父組件傳值

1.在子組件中建立一個按鈕，給按鈕綁定一個點擊事件

 

2.在響應該點擊事件的函數中使用$emit來觸發一個自定義事件，並傳遞一個參數

 

3.在父組件中的子標籤中監聽該自定義事件並添加一個響應該事件的處理方法

 

4.保存修改的文件，在瀏覽器中點擊按鈕

子組件向父組件傳值成功
總結一下：

• 子組件中須要以某種方式例如點擊事件的方法來觸發一個自定義事件
• 將須要傳的值做爲$emit的第二個參數，該值將做爲實參傳給響應自定義事件的方法
• 在父組件中註冊子組件並在子組件標籤上綁定對自定義事件的監聽

• 在通訊中，不管是子組件向父組件傳值仍是父組件向子組件傳值，他們都有一個共同點就是有中間介質，子向父的介質是自定義事件，父向子的介質是props中的屬性。抓準這兩點對於父子通訊就好理解了