VUE中使用bus在任何组件传值

最新推荐文章于 2026-05-21 08:32:05 发布

原创最新推荐文章于 2026-05-21 08:32:05 发布 · 219 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端

收录于

该文章介绍了如何在Vue项目中创建并使用自定义的事件总线bus.js来实现在非父子组件之间的通信。在bus.js中创建了一个新的Vue实例，然后在a.vue组件中监听busEvent事件，而在b.vue组件中触发这个事件，传递message数据。

1.创建bus.js文件

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

2.a.vue

<script>
	import bus from '@/common/bus.js';
	
	export default {
		mounted: function(){
			//接收，$bus的第一个参数名字要一致
			bus.$on('busEvent', ()=>{
				//监听执行方法
				
			})
		}
	}
</script>

3.b.vue

<script>
	import bus from '@/common/bus.js';
	
	export default {
		methods: {
			setBus(){
				//放送，$bus的第一个参数名字要一致
				this.$bus.$emit("busEvent", this.message);
			}
		}
	}
</script>