二、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);
    },
}
相关推荐
小龙报22 分钟前
《算法通关指南---C++编程篇(2)》
c语言·开发语言·数据结构·c++·程序人生·算法·学习方法
古一|38 分钟前
Vue3中ref与reactive实战指南:使用场景与代码示例
开发语言·javascript·ecmascript
peachSoda740 分钟前
封装一个不同跳转方式的通用方法(跳转外部链接,跳转其他小程序,跳转半屏小程序)
前端·javascript·微信小程序·小程序
宠友信息1 小时前
java微服务驱动的社区平台:友猫社区的功能模块与实现逻辑
java·开发语言·微服务
驰羽1 小时前
[GO]golang接口入门:从一个简单示例看懂接口的多态与实现
开发语言·后端·golang
熊猫钓鱼>_>1 小时前
TypeScript前端架构与开发技巧深度解析:从工程化到性能优化的完整实践
前端·javascript·typescript
ii_best1 小时前
IOS/ 安卓开发工具按键精灵Sys.GetAppList 函数使用指南:轻松获取设备已安装 APP 列表
android·开发语言·ios·编辑器
王夏奇1 小时前
C++友元函数和友元类!
开发语言·c++
Full Stack Developme1 小时前
jdk.random 包详解
java·开发语言·python
懒羊羊不懒@2 小时前
Java基础入门
java·开发语言