vue bus传参

最新推荐文章于 2024-05-18 21:15:09 发布

双手依舞

最新推荐文章于 2024-05-18 21:15:09 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/qq_32184753/article/details/107332393

版权

本文介绍如何在Vue项目中使用事件总线(bus)实现组件间的数据通信。通过创建一个名为bus.js的文件，作为事件总线，组件a.vue可以触发事件并传递数据，而组件b.vue可以通过监听事件来接收这些数据。

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

新建一个js文件，命名为bus.js。bus.js文件的内容为：

import Vue from 'vue'
const bus = new Vue()
export default bus

页面demo.vue包含两个组件 a.vue和b.vue
a.vue执行一个事件，传递数据到b.vue 或者b.vue执行一个事件，传递数据到a.vue
举例：a.vue执行事件传递数据到b.vue：
首先：
在a.vue和b.vue分别引入bus.js
其次：
发送信息：

import bus from '@/utils/bus'

a.vue执行事件($emit 发布命令)
第一个参数为标志变量，第二个参数为通信的值

aClick(item){
	bus.$emit('tellB',item)
}

接收信息:

import bus from '@/utils/bus'

b.vue接收事件($on 接收命令)
第一个参数为标志变量，第二个参数中的item为通信的值

bus.on('tellB',item => {
	//执行你的操作
})

最后要进行销毁

destroyed(){
	bus.$off('tellB') //这步操作为  卸载这个命令  不写的话，$on事件就会重复执行   有多少事件就卸载多少个
}

关注