一、跨组件调用函数
安装:npm install mitt
创建文件并写入:
bash
// bus.js
import mitt from 'mitt'
export const eventBus = mitt()
使用方法:
bash
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组件:
bash
import { eventBus } from '../../bus';
export default {
methods: {
active(id){
eventBus.emit('chat', id);//表示使用active这个函数将调用B里面对应填入chat的相关操作
},
}
}
B组件:
bash
import { eventBus } from '../../bus';
export default {
created() {
eventBus.on('chat', this.add_chat);
},
beforeUnmount() {
eventBus.off('chat', this.add_chat);
},
}