vue官網(wǎng)
vue3.x版本中不能在使用eventBus了，不過官方有替代品 mitt 或 tiny-emitter
本文介紹的是tiny-emitter
安裝
npm install tiny-emitter --save
使用
var Emitter = require('tiny-emitter');
var emitter = new Emitter();
emitter.on('some-event', function (arg1, arg2, arg3) {
//
});
emitter.emit('some-event', 'arg1 value', 'arg2 value', 'arg3 value');
實(shí)例方法
on(event, callback[, context])訂閱事件
event - 要訂閱的事件名稱
callback - emit觸發(fā)事件時(shí)要調(diào)用的函數(shù)
context - (可選的) - 將事件回調(diào)綁定到的this上下文
once(event, callback[, context])只訂閱一次事件
event - 要訂閱的事件的名稱
callback - emit發(fā)出事件時(shí)要調(diào)用的函數(shù)
context - (可選的) - 將事件回調(diào)綁定到的this上下文
off(event[, callback])取消訂閱事件或所有事件。如果沒有提供回調(diào)，它將取消對(duì)所有事件的訂閱。
event - 要取消訂閱事件的名稱
callback - 綁定到事件時(shí)使用的回調(diào)函數(shù)
emit(event[, arguments...])觸發(fā)命名事件
event - emit觸發(fā)事件時(shí)的事件名稱
arguments... - 傳遞給事件的回調(diào)函數(shù)任何數(shù)量的參數(shù)
項(xiàng)目中使用方法
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import Emitter from 'tiny-emitter'
const emitter = new Emitter()
const app = createApp(App)
// 綁定為全局可用
app.config.globalProperties.emitter = emitter
app.mount('#app')
組件中的使用方法
// 接收事件方法
this.emitter.on('changeLoading', (news) => {
this.isShowLoding = news
})
// 發(fā)送事件方法
this.emitter.emit('changeLoading', true)
