Vue中EventBus(事件总线)的基本用法
vue组件中最常见的数据传递就是父子组件之间的传递，父组件可以通过 props 向下传数据给子组件，子组件可以通过 $emit 事件携带数据给父组件。然而当两个页面没有任关系，该如何通信？这就引出了 EventBus ( 事件总线 ) 这个概念
初始化
方法一：新建文件
首先需要初始化一个 EventBus，并且向外共享一个 Vue 的实例对象
新建一个 js 文件，比如：EventBus.js
// src/utils/EventBus.js 文件
import Vue from 'vue'
// 向外共享 Vue 的实例对象
export default new Vue()方法二：挂载在 Vue 的原型上
在 main.js 中初始化 EventBus
// src/main.js
Vue.prototype.$EventBus = new Vue()传递数据
// a.vue
// 导入 EventBus
import EventBus from '@/utils/EventBus'
// 通过调用 bus.$emit('自定义事件', 数据) 触发自定义事件发送数据
EventBus.$emit('share', this.a_data);接收数据
// b.vue
// 导入 EventBus
import EventBus from '@/utils/EventBus'
// 通过调用 $on('自定义事件', 事件处理函数) 注册自定义事件接收数据
// 其中，value 即为接收的数据
EventBus.$on('share', value => {
this.b_data = value;
})移除事件
在组件离开，也就是被销毁前，需要将该监听事件给移除，以免下次再重复创建监听
// b.vue
// 移除监听事件 "share"
EventBus.$off('share')完整代码
utils/EventBus.js
import Vue from 'vue'
// 向外共享 Vue 的实例对象
export default new Vue()
import Vue from 'vue'
// 向外共享 Vue 的实例对象
export default new Vue()A 组件代码
<template>
<div>
<button @click="send">点我发送消息</button>
</div>
</template>
<script>
import EventBus from '@/utils/EventBus'
export default {
data:()=>({
a_data: 'message'
}),
methods: {
send () {
EventBus.$emit('share', this.a_data);
}
}
}
</script>
<template>
<div>
<button @click="send">点我发送消息</button>
</div>
</template>
<script>
import EventBus from '@/utils/EventBus'
export default {
data:()=>({
a_data: 'message'
}),
methods: {
send () {
EventBus.$emit('share', this.a_data);
}
}
}
</script>B 组件代码
<template>
<div>
<h1>{{ b_data }}</h1>
</div>
</template>
<script>
import EventBus from '@/utils/EventBus'
export default {
data: () => ({
b_data: null
}),
created () {
EventBus.$on('share', value => {
// 将 A 组件传递过来的数据保存到 B 组件
this.b_data = value;
})
},
beforeDestroy() {
// 移除监听事件 "share"
EventBus.$off('share')
}
}
</script>
<template>
<div>
<h1>{{ b_data }}</h1>
</div>
</template>
<script>
import EventBus from '@/utils/EventBus'
export default {
data: () => ({
b_data: null
}),
created () {
EventBus.$on('share', value => {
// 将 A 组件传递过来的数据保存到 B 组件
this.b_data = value;
})
},
beforeDestroy() {
// 移除监听事件 "share"
EventBus.$off('share')
}
}
</script>来源：https://www.cnblogs.com/bkzj/p/16743584.html
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
