vue2.0 父傳子,子傳父----父子間通訊
阿新 • • 發佈:2019-01-06
父元件向子元件傳值
- 子元件在props中建立一個屬性,用於接收父元件傳過來的值;
- 父元件 引入子元件-->註冊子元件-->引用子元件;
- 在子元件標籤中新增子元件props中建立的屬性;
- 將所要傳遞的值賦值給該屬性。
props:
- prop型別:通常你希望每個prop都有指定的資料型別,你可以以物件的形式列出prop,物件的屬性的名稱和值分別對應了prop的值和型別。
- 單向資料流:所有的prop都使得其父子prop形成一個單向資料流,即單向下資料流。父級prop的更新會單向流動到子元件中,但是反過來則不行,單向資料流能防止子元件意外改變父元件的狀態。額外的,每次父元件發生改變時,子元件中的prop將會更新為最新的值。
- 兩種常見的檢視改變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 來說,在子元件中改變這個物件或陣列本身將會影響到父元件的狀態。
子元件向父元件傳值
- 子元件需要以某種方式,例如點選事件的方法來觸發一個自定義事件
- 將所需要傳遞的值作為$emit的第二個引數,該值將作為實參傳給響應自定義事件的方法
- 父元件 引入子元件-->註冊子元件-->引用子元件
- 在子元件標籤上繫結對自定事件的監聽
自定義事件
- 父元件通過$on監聽事件,事件處理函式的引數則為接收的資料
- 子元件通過$emit可以觸發事件,第一個引數為要觸發的事件,第二個事件為要傳遞的資料
- 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中的屬性。