vue bus传参

新建一个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事件就会重复执行   有多少事件就卸载多少个
}

 

posted @ 2022-04-14 10:15  翘中之楚  阅读(213)  评论(0编辑  收藏  举报