欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2022年09月01日 09:46:43   作者：別拿bug搞偷襲  
EventBus是一種發(fā)布/訂閱事件設(shè)計(jì)模式的實(shí)踐,下面這篇文章主要給大家介紹了關(guān)于vue3如何使用eventBus訂閱發(fā)布模式的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下

Ⅰ. 什么是eventBus？

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

Ⅱ. vue3 如何使用

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

步驟一 （eventBus 容器）

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

編寫(xiě) 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>

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

步驟三 （ 發(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 要相同。

總結(jié)

到此這篇關(guān)于vue3如何使用eventBus訂閱發(fā)布模式的文章就介紹到這了,更多相關(guān)vue3 eventBus訂閱發(fā)布模式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論