Vue中的$Bus使用

Vue中的$Bus使用

将Bus单独抽离成一个文件

Bus.js

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

创建两个兄弟组建

C2.vue

<template>
	<view>
		<h1>c2</h1>
	</view>
</template>
<script>
// 引入Bus
import Bus from '@/util/Bus';
export default {
  // 在载入后的生命周期中
	 mounted () {
     		// 给bug绑定一个log事件,等待兄弟组件出发
       	Bus.$on('log', content => {
          // 输出兄弟组件传递的内容
        	console.log(content)
        });
    }    
}
</script>

C1.vue

<template>
	<view>
		<button @tap="tapBus">c1</button>
	</view>
</template>
<script>
import Bus from '@/util/Bus';
 
export default {
	methods:{
		tapBus(){
      // 点击按钮触发log事件，传递120过去，会输出到控制台
			Bus.$emit('log', 120)
		}
	}
}
</script>

index.vue

 
<template>
	<view class="content">
    <!-- 在首页显示这两个组件 -->
		<C1></C1>
		<C2></C2>
	</view>
</template>
 
<script>
// 引入组件
import C1 from '@/components/c1.vue';
import C2 from '@/components/c2.vue';
	export default {
    // 并注册
		components:{
			C1,
			C2
		},
	}
</script>

注意:这种引入方式，经过webpack打包后可能会出现Bus局部作用域的情况，即引用的是两个不同的Bus，导致不能正常通信

将Bus注入到Vue的prototype上

main.js

// 将挂载到prototype单独抽离成一个文件
import plugin from './util/Bus';
Vue.use(plugin);

./util/Bus.js

import Bus from 'vue';
let install = function (Vue) {
	// 设置eventBus
	Vue.prototype.bus = new Bus();
}
 
export default { install };

C2.vue

<template>
	<view>
		<h1>c2</h1>
	</view>
</template>
<script>
export default {
	 mounted () {
    // 注册事件
		this.bus.$on('updateData', (content)=>{
			console.log(content);
		});
	},
  	// 注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况
	beforeDestroy () {
    this.bus.$off('updateData', (content)=>{
			console.log(content);
		});
  }
}
</script>

C1.vue

<template>
	<view>
		<button @tap="tapBus">c1</button>
	</view>
</template>
<script>
export default {
	methods:{
		tapBus(){
      // 触发兄弟组件身上的事件，并传一个object过去
			this.bus.$emit('updateData', {loading: false});
		}
	}
}
</script>