vue3 .js使用全局事件总线方法和解决传递不生效问题

小黑子学java

已于 2024-07-09 10:06:51 修改

阅读量526

点赞数 4

文章标签： vue spring boot 前端

于 2024-03-22 11:16:15 首次发布

本文链接：https://blog.csdn.net/hotwateron/article/details/136935237

版权

本文介绍了如何通过Mitt库在JavaScript中实现组件间的异步数据传递，尤其关注于当组件间不存在父子关系时如何有效地进行通信，通过事件触发和监听来完成数据交换。

摘要由CSDN通过智能技术生成

使用事件总线实现组件之间数据传递，应用场景在组件之间不存在父子关系的组件传值问题。

首先，安装传输工具

npm install mitt --save

2、我采用局部引入的方法

创建新的js文件(bus.js文件)

import mitt from 'mitt'import mitt from 'mitt'
export const events = mitt()

3、触发传值组件引入该工具类

import { events } from '@/utils/bus.js'//事件总线

触发组件传递设置代码

events.emit('equipmentData',this.formInitNode)

“equipmentData”表示事件名，this.formInitNode表示要传递给其他组件的数据。

4、接受组件写法

在接受组件引入工具类

import { events } from '@/utils/bus.js';

在created组件挂在前触发

  created() {
    events.on('equipmentData',(message)=>{
      alert(message)
      console.log(11111111111111111111111)
    })
  },

完成

出现问题情况，这样写没法触发