因为这个方法和node的监听机制特定相似，所以单独拿出来了解一下。
而且它的能力特别强大：
可以父子、兄弟、隔代之间传递数据
核心在于一个在父子、兄弟、隔代之间传递的统一的Vue实例。
先说一个终极方法：
//main.js
//创建一个统一的对象
Vue.prototype.$SS = new Object();
然后在任何你想要使用的地方：
this.$SS.message = 'qiao';
在任意需要用到值的地方：
this.$SS.message // qiao
如果想进一步了解，可以看下边的方法:
（1）父组件
// 父组件
<template>
<div class="container">
<child1 :Event="Event"></child1>
<child2 :Event="Event"></child2>
<child3 :Event="Event"></child3>
</div>
</template><script>
import Vue from "vue";import Child1 from "./component/child1.vue";
import Child2 from "./component/child2.vue";
import Child3 from "./component/child3.vue";const Event = new Vue();
export default {
name: "demo",
data: function() {
return {
Event: Event
};
},
components: {
Child1,
Child2,
Child3
},
};
</script>
从上边可以看到父子之间有统一的Vue实例。三个子组件的Event和父组件的Event是同一个Vue实例。
子组件之间通过props接收传递过来的vue实例：
(2)子组件部分
子组件1
<template>
<div class="center">
1.我的名字是：{{name}}
<button @click="send">我给3组件赋值</button>
</div>
</template><script>
export default{
name: "demo1",
data() {
return {
name: "政采云"
};
},
props: {
Event //传递过来的Vue实例
},
methods: {
send() {//子组件1，通过$emit实例方法，发出key/value
this.Event.$emit("message-a", this.name);
}
}
};
</script>
子组件2
<template>
<div class="center">
2.我的年龄是：{{age}}岁
<button @click="send">我给3组件赋值</button>
</div>
</template><script>
/* eslint-disable */
export default {
name: "demo2",
data() {
return {
age: "3"
};
},
props: {
Event //传递过来的Vue实例
},
methods: {
send() {//子组件2，通过$emit实例方法，发出key/value
this.Event.$emit("message-b", this.age);
}
}
};
</script>
子组件3
<template>
<div class="center">我的名字是{{name}}，今年{{age}}岁</div>
</template><script>
export default{
name: 'demo3',
data() {
return {
name: '',
age: ''
};
},
props: {
Event
},
mounted() {//子组件3，通过key值监听，用一个回调函数展开，
this.Event.$on('message-a', name => {
this.name = name;
});//子组件3，通过key值监听，用一个回调函数展开
this.Event.$on('message-b', age => {
this.age = age;
});
},
};
</script>
last：
当然也可以子组件$emit键值对，然后父组件$on监听key值回调展开
