Vue2 元件間通訊全方案

Kevin發表於2017-07-27
Vue元件

說的不對的，敬請諒解，大家共同討論進步

元件通訊包括：父子元件間的通訊和兄弟元件間的通訊。在元件化系統構建中，元件間通訊必不可少的。

父元件--> 子元件

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中央通訊

目前中央通訊是解決兄弟間通訊，祖父祖孫間通訊的最佳方法，不僅限於此，也可以解決父元件子元件間的相互通訊。如下圖：

clipboard.png

各元件可自己定義好元件內接收外部元件的訊息事件即可，不用理會是哪個元件發過來；而對於傳送事件的元件，亦不用理會這個事件到底怎麼傳送給我需要傳送的元件。

先設定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中央通訊的方案各種情況下都可用，比較方便，具體內在原理後續更新說明。

相關文章