vue非父子组件通信

                <div id="app">
			<div v-if="this.message.length">{{message}}</div>
			<div id="" v-else><span>数据为空</span></div>
			<component-a></component-a>
			<button  @click="handleConsole">console.log</button>
		</div>
		<template id="passEvents">
			<button @click="handleEvents">传递事件</button>
		</template>

js

                <script>
			var bus = new Vue();//首先创建一个名为bus的空Vue实例，里面没有任何内容。
			Vue.component("component-a",{
				template:'#passEvents',
				data:function(){
					return {
						
					}
				},
				methods:{
					handleEvents:function(){
						bus.$emit('on-message','来自组件component-a的内容');
						//在组件component-a里 点击按钮会通过bus 把事件on-message发出去，此时app就会接受到来自bus的事件，进而在回调里完成自己的业务逻辑
					},
				}
			});
			var app = new Vue({
				el:'#app',
				data:{
					message:''
				},
				mounted:function(){ //在实例初始化时，监听来自bus实例的事件
					var _this = this;//在app初始化时，也就是在生命周期mounted钩子函数里监听了 来自bus的事件on-message，
					bus.$on('on-message',function(msg){
						 _this.message = msg;
					})
				},
				methods:{
					handleConsole:function(){
						this.message = '传递数据'
						console.log(this.message.length)
					}
				}
			})
		</script>

这种方法巧妙而轻量的实现了任何组件间的通信，包括父子，兄弟，跨级，而且vue 1.x和vue 2.x 都适用，如果深入使用，可以扩展bus 实例，给他添加data，methods，computed等选项，这些都是公用的。