vue中：Bus兄弟传值

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>