vue2.0 父傳子，子傳父----父子間通信

父組件向子組件傳值

1.     子組件在props中創建一個屬性，用於接收父組件傳過來的值；
2.     父組件 引入子組件-->註冊子組件-->引用子組件；
3.     在子組件標籤中添加子組件props中創建的屬性；
4.     將所要傳遞的值賦值給該屬性。

props：

1. prop類型：通常你希望每個prop都有指定的數據類型，你可以以對象的形式列出prop，對象的屬性的名稱和值分別對應了prop的值和類型。
2. 單向數據流：所有的prop都使得其父子prop形成一個單向數據流，即單向下數據流。父級prop的更新會單向流動到子組件中，但是反過來則不行，單向數據流能防止子組件意外改變父組件的狀態。額外的，每次父組件發生改變時，子組件中的prop將會更新爲最新的值。
3. 兩種常見的視圖改變prop的值：

 

• 這個prop用來傳遞一個初始值。子組件希望將其作爲一個本地的prop數據來使用。在這種情況下，最好定義一個本地的data屬性並將這個prop作爲其初始值

            props: ['initialCounter'],

            data: function () {

                return {

                    counter: this.initialCounter

                }

            }

 

• prop以原始的值傳入其需要轉換，此時最好使用這個 prop 的值來定義一個計算屬性

            props: ['size'],

            computed: {

              normalizedSize: function () {

                return this.size.trim().toLowerCase()

              }

        }

    
注意：在 JavaScript 中對象和數組是通過引用傳入的，所以對於一個數組或對象類型的 prop 來說，在子組件中改變這個對象或數組本身將會影響到父組件的狀態。   

子組件向父組件傳值

1.     子組件需要以某種方式，例如點擊事件的方法來觸發一個自定義事件
2.     將所需要傳遞的值作爲$emit的第二個參數，該值將作爲實參傳給響應自定義事件的方法
3.     父組件 引入子組件-->註冊子組件-->引用子組件
4.     在子組件標籤上綁定對自定事件的監聽

自定義事件

1.     父組件通過$on監聽事件，事件處理函數的參數則爲接收的數據
2.     子組件通過$emit可以觸發事件，第一個參數爲要觸發的事件，第二個事件爲要傳遞的數據 
3.     sync修飾符：對一個 prop 進行雙向綁定

• 父組件屬性的 v-on 偵聽器

            <comp :foo.sync="bar"></comp>

• 會被擴展爲：

            <comp :foo="bar" @update:foo="val => bar = val"></comp>

• 當子組件需要更新 foo 的值時，它需要顯式地觸發一個更新事件：

            this.$emit('update:foo', newValue)

總結：在通信中，無論是子傳父或父傳子都是有中間介質。子傳父的介質是自定義事件，父傳子的介質是props中的屬性。