二、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);
    },
}
相关推荐
engchina1 分钟前
Python PDF处理库深度对比:PyMuPDF、pypdfium2、pdfplumber、pdfminer的关系与区别
开发语言·python·pdf
拓端研究室4 分钟前
专题:2025供应链数智化与效率提升报告|附100+份报告PDF、原数据表汇总下载
开发语言·php
一百天成为python专家26 分钟前
python库之jieba 库
开发语言·人工智能·python·深度学习·机器学习·pycharm·python3.11
Go Dgg1 小时前
【Go + Gin 实现「双 Token」管理员登录】
开发语言·golang·gin
十五年专注C++开发1 小时前
hiredis: 一个轻量级、高性能的 C 语言 Redis 客户端库
开发语言·数据库·c++·redis·缓存
WJ.Polar1 小时前
Python数据容器-集合set
开发语言·python
晓13131 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
海底火旺1 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
前端付豪2 小时前
15、前端可配置化系统设计:从硬编码到可视化配置
前端·javascript·架构
nbsaas-boot2 小时前
Go语言生态成熟度分析:为何Go还无法像Java那样实现注解式框架?
java·开发语言·golang