非父子组件通信 bus

在Vue.js 2.x中，推荐使用一个空的Vue实例作为中央事件总线（bus），也就是一个中介

<div id="app">
	{{message}}
	<component-a></component-a>
</div>
<script>
	let bus = new Vue();
	Vue.component('component-a', {
		template: '<button @click="handleEvent">传递事件</button>',
		methods: {
			handleEvent() {
				bus.$emit('on-message', '来自组件component-a的内容')
			}
		}
	});
	let app = new Vue({
		el: '#app',
		data: {
			message: ''
		},
		mounted() {
			let _this = this;
			// 在实例初始化时，监听来自bus实例的事件
			bus.$on('on-message', msg => {_this.message = msg})
			// 其他几种写法
			// bus.$on('on-message', ({item, index})=> this.fn(item, index))
			// bus.$on('on-message', this.fn)
		}
	})
</script>