vue中央bus主线传值

最新推荐文章于 2026-06-20 10:08:18 发布

原创最新推荐文章于 2026-06-20 10:08:18 发布 · 344 阅读

0 ·

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

收录于

本文介绍Vue项目中不同组件间的通信方法之一：通过Event Bus实现非父子组件间的值传递。包括Event Bus的设置、使用及如何在组件中发送与接收信息。

在vue项目中 传值有父子传值，子父传值，兄弟传值，vuex传值，还有中央bus主线
第一步，在assets面创建一个bus.js文件，import  vue  from “vue”；
export default new Vue()

第二步 创建两个 vue文件 比如child1.vue用来发送值；

<template>
	<div class="box">
		<button @click="sendmsg"> 发送信息给子组件</button>
	</div>
</template>

<script>
	import bus from "../assets/js/eventBus"
	export default{
		methods:{
			sendmsg(){
				bus.$emit("usesend",'this is from child')//自定义函数，以及要传的值；
			}
		}
	}
</script>
<style>
</style>
创建一个vue用来接收值
<template>
	<p>{{msg}}</p>
</template>

<script>
	import bus from "../assets/js/eventBus"
	export default{
		data(){
			return {
				msg:'default'
			}
		},
		mounted(){
			bus.$on('usesend',(msg)=>{
				this.msg=msg;
			})
		}
	}
</script>
<style>
</style>