vue3.x版本中使用tiny-emitter代替vue2.x的eventBus

vue官网

本文介绍的是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');

实例方法

on(event, callback[, context])订阅事件
  event - 要订阅的事件名称
  callback - emit触发事件时要调用的函数
  context - (可选的) - 将事件回调绑定到的this上下文

once(event, callback[, context])只订阅一次事件
  event - 要订阅的事件的名称
  callback - emit发出事件时要调用的函数
  context - (可选的) - 将事件回调绑定到的this上下文

off(event[, callback])取消订阅事件或所有事件。如果没有提供回调，它将取消对所有事件的订阅。
  event - 要取消订阅事件的名称
  callback - 绑定到事件时使用的回调函数
  emit(event[, arguments...])触发命名事件
  event - emit触发事件时的事件名称
  arguments... - 传递给事件的回调函数任何数量的参数

项目中使用方法

// 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
})
// 发送事件方法
this.emitter.emit('changeLoading', true)