二、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);
    },
}
相关推荐
江城开朗的豌豆19 分钟前
JavaScript篇:函数间的悄悄话:callee和caller的那些事儿
javascript·面试
江城开朗的豌豆35 分钟前
JavaScript篇:回调地狱退散!6年老前端教你写出优雅异步代码
前端·javascript·面试
TE-茶叶蛋1 小时前
Vue Fragment vs React Fragment
javascript·vue.js·react.js
我很好我还能学1 小时前
【面试篇 9】c++生成可执行文件的四个步骤、悬挂指针、define和const区别、c++定义和声明、将引用作为返回值的好处、类的四个缺省函数
开发语言·c++
蓝婷儿1 小时前
6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础
开发语言·python·学习
渣渣盟2 小时前
基于Scala实现Flink的三种基本时间窗口操作
开发语言·flink·scala
糯米导航2 小时前
Java毕业设计:办公自动化系统的设计与实现
java·开发语言·课程设计
糯米导航2 小时前
Java毕业设计:WML信息查询与后端信息发布系统开发
java·开发语言·课程设计
Carlos_sam2 小时前
Opnelayers:封装Popup
前端·javascript
MessiGo3 小时前
Javascript 编程基础(5)面向对象 | 5.1、构造函数实例化对象
开发语言·javascript·原型模式