父元件向子元件傳值

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中的屬性。