二、Vue3跨组件调用函数[mitt]

一、跨组件调用函数

安装：npm install mitt
创建文件并写入：

// bus.js
import mitt from 'mitt'
export const eventBus = mitt()

使用方法：

import { eventBus } from '../../bus';
eventBus.emit(name,data) 
//触发事件，两个参数：name：触发的方法名，data：需要传递的参数
eventBus.on(name,callback) 
//绑定事件，两个参数：name：绑定的方法名，callback：触发后执行的回调函数
eventBus.off(name,callback) 
//解绑事件，一个参数：name：需要解绑的方法名,callback：on中绑定的函数名

示例(目标A组件调用B组件的函数)：

A组件：

import { eventBus } from '../../bus';
export default {
    methods: {
        active(id){
            eventBus.emit('chat', id);//表示使用active这个函数将调用B里面对应填入chat的相关操作
        },
   }
}

B组件：

import { eventBus } from '../../bus';
export default {
    created() {
        eventBus.on('chat', this.add_chat);
    },
    beforeUnmount() {
        eventBus.off('chat', this.add_chat);
    },
}