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

一、跨组件调用函数

安装: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);
    },
}
相关推荐
前端康师傅9 分钟前
JavaScript 作用域
前端·javascript
云枫晖22 分钟前
JS核心知识-事件循环
前端·javascript
eason_fan1 小时前
Git 大小写敏感性问题:一次组件重命名引发的CI构建失败
前端·javascript
前端付豪3 小时前
1、震惊!99% 前端都没搞懂的 JavaScript 类型细节
前端·javascript·面试
朝与暮3 小时前
js符号(Symbol)
前端·javascript
大怪v3 小时前
前端:人工智能?我也会啊!来个花活,😎😎😎“自动驾驶”整起!
前端·javascript·算法
遂心_5 小时前
为什么 '1'.toString() 可以调用?深入理解 JavaScript 包装对象机制
前端·javascript
王同学QaQ6 小时前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
程序员鱼皮6 小时前
刚刚 Java 25 炸裂发布!让 Java 再次伟大
java·javascript·计算机·程序员·编程·开发·代码
Asort7 小时前
JavaScript 从零开始(五):运算符和表达式——从零开始掌握算术、比较与逻辑运算
前端·javascript