vue3如何使用eventBus訂閱發(fā)布模式

更新時(shí)間：2022年09月01日 09:46:43 作者：別拿bug搞偷襲

EventBus是一種發(fā)布/訂閱事件設(shè)計(jì)模式的實(shí)踐,下面這篇文章主要給大家介紹了關(guān)于vue3如何使用eventBus訂閱發(fā)布模式的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

Ⅰ. 什么是eventBus？

通俗的講，就是在任意一個(gè)組件，想把消息（參數(shù)） -> 傳遞到任意一個(gè)組件，并執(zhí)行一定邏輯。

Ⅱ. vue3 如何使用

eventBus vue3中沒有了，eventBus，所以我們要自己寫，但是非常簡(jiǎn)單。

步驟一（eventBus 容器）

在src目錄，創(chuàng)建個(gè)bus文件夾，存放自己寫的 bus.js ；

編寫 bus.js => 在class 原型上綁定三個(gè) （訂閱，取消訂閱，發(fā)布）函數(shù)；

// bus.js
class Bus {
	constructor() {
		this.list = {};  // 收集訂閱
	}
	// 訂閱
	$on(name, fn) {
		this.list[name] = this.list[name] || [];
		this.list[name].push(fn);
	}
	// 發(fā)布
	$emit(name, data) {
		if (this.list[name]) {
      		this.list[name].forEach((fn) => {	fn(data);   });
    	}
	}
	// 取消訂閱
	$off(name) {
		if (this.list[name]) {
			delete this.list[name];
		}
	}
}
export default new Bus;

訂閱者（on），講函數(shù)放入 list 中 => 等待發(fā)布者（emit），傳參去調(diào)用；

由于函數(shù)是對(duì)象，內(nèi)存地址未發(fā)生變化，還在在訂閱者（on）組件中執(zhí)行。

步驟二（訂閱者）

在 comA.vue 中訂閱；

訂閱只是存放函數(shù)，并未執(zhí)行，等發(fā)布后才會(huì)執(zhí)行；

<template>
  <div>
 	{{ name }} --- {{ age }}
  </div>
</template>
<script>
import {ref , onUnmounted} from 'vue';
import Bus from '../bus/bus.js';
export default {
  setup() {
       const name = '張三';
       const age = ref(18)
       Bus.$on('addAge',({ num })=>{    age.value = num;    })
       
       //組件卸載時(shí)，取消訂閱
	   onUnmounted( () => { Bus.$off('addAge') } )
 	}
 }
</script>

在離開組件（onUnmounted）時(shí) ，將注冊(cè)進(jìn)去的，訂閱函數(shù)的數(shù)組刪除，避免存放越來越多。

步驟三（發(fā)布者）

在 comB.vue 中發(fā)布；

調(diào)用訂閱并傳參；

<template>
    <button @click="fabu">發(fā)布</button>
</template>
<script>
import Bus from '../eventBus/Bus.js'
export default {
  setup() {
	 function fabu(){
 		Bus.$emit('addAge',{age:'19'});
	 }
   }
 }
</script>

發(fā)布后，在訂閱者的組件就會(huì)執(zhí)行，注意對(duì)應(yīng)的訂閱和發(fā)布的name 要相同。