說的不對的,敬請諒解,大家共同討論進步
元件通訊包括:父子元件間的通訊和兄弟元件間的通訊。在元件化系統構建中,元件間通訊必不可少的。
父元件--> 子元件
1. 屬性設定
父元件關鍵程式碼如下:
<template>
<Child :child-msg="msg"></Child>
</template>
子元件關鍵程式碼如下:
export default {
name: 'child',
props: {
child-msg: String
}
};
child-msg 為父元件給子元件設定的額外屬性值,屬性值需在子元件中設定props,子元件中可直接使用child-msg變數。
2. 子元件呼叫父元件
子元件通過 $parent 獲得父元件,通過 $root 獲得最上層的元件。
子元件--> 父元件
1. 傳送事件/監聽事件
子元件中某函式內傳送事件:
this.$emit('toparentevent', 'data');
父元件監聽事件:
<Child :msg="msg" @toparentevent="todo()"></Child>
toparentevent 為子元件自定義傳送事件名稱,父元件中@toparentevent為監聽事件,todo為父元件處理方法。
2. 父元件直接獲取子元件屬性或方法
給要呼叫的子元件起個名字。將名字設定為子元件 ref 屬性的值。
<!-- 子元件。 ref的值是元件引用的名稱 -->
<child-component ref="aName"></child-component>
父元件中通過 $refs.元件名 來獲得子元件,也就可以呼叫子元件的屬性和方法了。
var child = this.$refs.aName
child.屬性
child.方法()
父元件通過 $children 可以獲得所有直接子元件(父元件的子元件的子元件不是直接子元件)。需要注意 $children 並不保證順序,也不是響應式的。
Bus中央通訊
目前中央通訊是解決兄弟間通訊,祖父祖孫間通訊的最佳方法,不僅限於此,也可以解決父元件子元件間的相互通訊。如下圖:
各元件可自己定義好元件內接收外部元件的訊息事件即可,不用理會是哪個元件發過來;而對於傳送事件的元件,亦不用理會這個事件到底怎麼傳送給我需要傳送的元件。
先設定Bus
//bus.js
import Vue from 'vue'
export default new Vue();
元件內監聽事件:
import bus from '@/bus';
export default {
name: 'childa',
methods: {
},
created() {
bus.$on('childa-message', function(data) {
console.log('I get it');
});
}
};
傳送事件的元件:
import bus from '@/bus';
//方法內執行下面動作
bus.$emit('childa-message', this.data);
Bus中央通訊的方案各種情況下都可用,比較方便,具體內在原理後續更新說明。