二、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);
    },
}
相关推荐
^Rocky2 分钟前
JavaScript性能优化实战
开发语言·javascript·性能优化
ponnylv19 分钟前
深入剖析Spring Boot启动流程
java·开发语言·spring boot·spring
萧邀人26 分钟前
第一课、Cocos Creator 3.8 安装与配置
开发语言
西陵30 分钟前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
笑鸿的学习笔记1 小时前
JavaScript笔记之JS 和 HTML5 的关系
javascript·笔记·html5
Jayden_Ruan1 小时前
C++逆向输出一个字符串(三)
开发语言·c++·算法
不吃鱼的羊1 小时前
启动文件Startup_vle.c
c语言·开发语言
VBA63372 小时前
VBA之Word应用第四章第二节:段落集合Paragraphs对象(二)
开发语言
点云SLAM2 小时前
C++ 常见面试题汇总
java·开发语言·c++·算法·面试·内存管理
萌萌哒草头将军2 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js