非父子组件之间的通信
方法一：使用一个空的 Vue 实例作为事件总线
var bus = new Vue()
// 触发组件 A 中的事件
bus.$emit('函数名', 数据)
// 在组件 B 创建的钩子中监听事件
bus.$on('函数名', function (参数) {
// ...
})
注意这个2个事件触发的时机，触发之前必须要监听
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>飞父子组件通信</title>
<script src="../js/vue/vue.js"></script>
</head>
<body>
<div id="myApp">
<my-a></my-a>
<my-b></my-b>
<my-c></my-c>
</div>
<template id="a">
<div>
<div>
a组件{{name}}
</div>
<button @click="send">发送数据给c组件</button>
</div>
</template>
<template id="b">
<div>
b组件{{age}}
</div>
</template>
<template id="c">
<div>
c组件{{name}}
</div>
</template>
</body>
<script>
// 创建一个空的vue实例
var Event = new Vue();
var A = {
template:'#a',
data:function(){
return {
name:'路飞'
}
},
methods:{
send:function(){
// 触发组件 A 中的事件，发送数据
Event.$emit('a-data',this.name);
}
}
}
var B ={
template:'#b',
data:function(){
return {
age:18
}
}
}
var C ={
template:'#c',
data:function(){
return {
name:'',
}
},
mounted:function(){
var vm =this;
// 接收数据
Event.$on('a-data', function(name){
vm.name=name;//此处的this指向为Event，注意缓存起C的this，如果用箭头函数也可以，（箭头函数不改变this）
})
}
}
let vm = new Vue({
el:"#myApp",
data:{
},
components:{
'my-a':A,
'my-b':B,
'my-c':C,
},
})
</script>
</html>
注意：Event.$on()该方法，里面的this指向改变
