Vue2 元件間通訊全方案

2021-09-16 14:24:14 字數 1457 閱讀 7100

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

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

父元件關鍵**如下：
子元件關鍵**如下：

export default 


};
child-msg 為父元件給子元件設定的額外屬性值，屬性值需在子元件中設定props，子元件中可直接使用child-msg變數。

子元件通過 $parent 獲得父元件，通過 $root 獲得最上層的元件。

子元件中某函式內傳送事件：

this.$emit('toparentevent', 'data');
父元件監聽事件：

toparentevent 為子元件自定義傳送事件名稱，父元件中@toparentevent為監聽事件，todo為父元件處理方法。

給要呼叫的子元件起個名字。將名字設定為子元件 ref 屬性的值。
父元件中通過 $refs.元件名 來獲得子元件，也就可以呼叫子元件的屬性和方法了。

var child = this.$refs.aname


child.屬性


child.方法()
父元件通過 $children 可以獲得所有直接子元件（父元件的子元件的子元件不是直接子元件）。需要注意 $children 並不保證順序，也不是響應式的。

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

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

先設定bus

import vue from 'vue'


export default new vue();
元件內監聽事件：

import bus from '@/bus';


export default ,


created() );


}};
傳送事件的元件：

import bus from '@/bus';


//方法內執行下面動作


bus.$emit('childa-message', this.data);
bus**通訊的方案各種情況下都可用，比較方便，具體內在原理後續更新說明。

Vue2 元件封裝

接觸乙個前端框架，除了基礎的使用語法以外我們接下來都會很關心元件和復用的問題。以下就是個簡單的例子。下面是在父元件中引入子元件的 片段 booklist out container booklist container for book in books book book div button c...

Vue 二 元件間通訊

父元件中定義元素 如job 初始化 data 資料 data function 父元件中子元件標籤中定義並繫結資料 如 job job 等號左邊屬性名需和子元件定義 呼叫的寫法一樣，右邊表示父元件中的資料元素 name name job job namewasreset name event res...

vue 2 元件之間傳值

對vue2版本的元件之間傳值的乙個簡單整合 父元件 子元件 props 和 refs props parent this.ref.helloworld.msg子元件 父元件 自定義事件 child this.emit send msg parent 兄弟元件 通過共同祖輩搭橋 par ent或 pa...