mitt 全局事件总线通信

全局事件总线通信可以用于多个组件之前相互通信,包括但不限于父子、兄弟组件间通信。

注意

• emit分发和on接收 需要在onMounted或之后的生命周期执行，否则无效。
• 刷新页面后，已更新的数据将回到初始值。

汇总

• .emit('事件名', 参数) 触发总线上指定的事件
• .on('事件名','回调函数') 接收总线上某个事件
• .off('事件名') 清除总线上指定事件
• .all.clear() 清除总线上绑定的所有事件

安装

npm install --save mitt

应用

//main.ts文件代码：
import { createApp } from 'vue'
import App from '@/App.vue'
// 全局事件总线
import mitt from 'mitt'
const app: any = createApp(App)
app.config.globalProperties.$mittBus = mitt()
app.mount('#app')


// 父组件代码：///////////////////////////
const { proxy } = getCurrentInstance()
// const { $mittBus } = getCurrentInstance()?.appContext.config.globalProperties
onMounted(() => {
  proxy.$mittBus.emit('mittUser', state.user)
})


// 子组件A代码：/////////////////////////////
const { proxy } = getCurrentInstance()
function getState() {
  console.log('$mittBus', proxy.$mittBus)
  proxy.$mittBus.on('mittUser', (data) => {
    console.log('mitt.on: data', data)
    data.name += '丰'
    data.age += 1
    state.value = data
  })
  proxy.$mittBus.emit('mittUserA', {
    name: '李四A',
    age: 6
  })
}
onMounted(() => {
  getState()
})
onUnmounted(() => {
  proxy.$mittBus.off('mittUserA')
})

// 子组件B代码：/////////////////////////////
const { proxy } = getCurrentInstance()
const state = ref({})
const userA = ref({})
function getState() {
  // 接口来自父组件分发的事件
  proxy.$mittBus.on('mittUser', (data) => {
    state.value = data
  })
  // 接口来自兄弟组件分发的事件
  proxy.$mittBus.on('mittUserA', (val) => { userA.value = val })
}
onMounted(() => {
  getState()
})

全局事件总线,独立成文件

// src/bus/index.ts
import mitt from 'mitt';
const $bus = mitt();
export default $bus;

//组件A中监听使用
import $bus from "../../bus";
onMounted(() => {
  $bus.on("car", (data) => {
    console.log(data.car);
  });
});
//组件B触发
const handler = ()=>{
  $bus.emit('car',{car:"法拉利"});
}