vue中：Bus兄弟传值

最新推荐文章于 2025-04-11 10:23:44 发布

暖风阵阵

最新推荐文章于 2025-04-11 10:23:44 发布

阅读量316

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 知识点文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_46899191/article/details/121909511

知识点同时被 2 个专栏收录

9 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

本文介绍了如何在Vue应用中创建bus.js中介组件，以实现在父组件（index.vue）和子组件（nav-bar.vue和tab-list.vue）之间的数据双向传递。通过nav-bar.vue触发数据发送，tab-list.vue接收到并更新显示，展示了Vue组件间的通信机制。

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

1，创建bus.js作为中转站

// bus.js
import Vue from 'Vue';
export default new Vue;

2，父组件index.vue

<template>
	<div>
		主页面
		<nav-bar></nav-bar>
		<tab-list></tab-list>
	</div>
</template>

<script>
	import navBar from './nav-bar.vue';
	import tabList from './tab-list.vue';
	export default{
		components:{
			navBar,
			tabList
		},
		data(){
			return{
			
			}
		},
	  }
</script>
<style>
</style>

3，子组件nav-bar.vue

//这个子组件负责：发送
<template>
	<div>
		111111111
		<button @click="addClick"> 发送数据 </button>
	</div>
</template>

<script>
	// (1)引入bus文件
	import Bus from './bus.js';
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			addClick(){
					//(2)通过$emit发送数据 (名称,发送的内容)
					Bus.$emit('sName', "这是一个兄弟组件传来的数据");
				}
		}
	}
</script>
<style>
</style>

4，子组件tab-list.vue

//这个子组件负责：接收
<template>
  <div>
    222222
    <div>{{val}}</div>
  </div>
</template>

<script>

//（1）引入bus.js文件
import Bus from './bus.js';

export default {
  data() {
    return {
      val: ""
    };
  },
 
  mounted() {
		//写法1，箭头函数
		//通过$on接收数据 (名称，方法：对数据的操作)
    //   Bus.$on('myMsg', content => {  
				// this.val = content
    //   });
		 //写法2，改变this指向，否则值能拿到，但不能渲染到页面
		  let that = this
			Bus.$on("sName",function(content){
				that.val = content
			})
  }
};
</script>