Vue的全局事件总线实现任意组件间通信

百香果果ccc

已于 2022-12-30 11:52:27 修改

阅读量597

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： vue.js javascript 前端

于 2022-12-30 11:41:14 首次发布

本文链接：https://blog.csdn.net/wytccc/article/details/128492987

Vue 专栏收录该内容

48 篇文章

订阅专栏

本文介绍了如何在Vue应用中创建并使用全局事件总线进行组件间的通信。首先，在main.js中安装全局事件总线，通过Vue.prototype挂载。然后，展示了一个接收数据的组件如何注册监听自定义事件，并在销毁前解除绑定。最后，演示了发送数据的组件如何触发自定义事件，将数据传递给其他组件。这种方法灵活地实现了非父子组件间的通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

全局事件总线原理：利用自定义事件实现

在main.js中安装全局事件总线

import Vue from 'vue';
import App from 'App.vue';
new Vue({
	render: h => h(App),
	beforeCreate() {
		// 在Vue实例创建之前安装全局事件总线
		Vue.prototype.$bus = this;
	}
}).$mount('#app');

在需要接收数据的组件中定义、解绑自定义事件

<!-- 需要接收数据的组件 -->
<template></template>
<script>
	export default {
		methods: {
			getValue(value) {
				console.log('接收到的数据为:' + value);
			}
		},
		mounted() {
			this.$bus.$on('zidingyiEvent', this.getValue);
		},
		beforeDestroy() {
			this.$bus.$off('zidingyiEvent');
		}
	}
</script>

在需要发送数据的组件中触发自定义事件

<template>
	<div>
		<button @click="send">点击传递数据</button>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				person: {
					name: 'wuwu',
					age: 18
				}
			}
		},
		methods: {
			send() {
				this.$bus.$emit('zidingyiEvent', this.person);
			}
		}
	}
</script>