1. vm.$on(event,callback)

用法：監(jiān)聽當(dāng)前實(shí)例上的自定義事件。事件可以由vm.$emit觸發(fā)?；卣{(diào)函數(shù)會(huì)接收所有傳入事件觸發(fā)函數(shù)的額外函數(shù)。
個(gè)人理解：監(jiān)聽接收傳來的值

vm.$on('test',function(msg){
  console.log(msg)
})

示例：

2. vm.$emit(eventName,[..args])

用法：觸發(fā)當(dāng)前實(shí)例上的事件。附加參數(shù)都會(huì)傳給監(jiān)聽器回調(diào)。
個(gè)人理解： 注冊(cè)一個(gè)自定義事件

// 只配合一個(gè)事件名使用emit

// 子組件
Vue.component('welcome-button',{
  template: `
    <button @click="$emit('welcome')">點(diǎn)擊按鈕</button>
  `
})
// 父組件
<div>
  <welcome-button v-on:welcome="sayHi"></welcome-button>
</div>  
...
...
...
methods: {
  sayHi() {
    alert('Hi!')  
  }
}

示例：
有時(shí)候項(xiàng)目里面會(huì)遇到子組件與子組件通信。比如以下情況：
頁(yè)面里引入了header組件和content組件，點(diǎn)擊content組件的按鈕，想要改變header組件的內(nèi)容。

<template>
  <div class="home">
    <v-header></v-header>
    <v-content></v-content>
  </div>
</template>
<script>

image.png

（1）首先，在main.js里面全局注冊(cè)一個(gè)eventbus的方法

import Vue from 'vue';
import App from './App.vue';
import router from './router';

Vue.config.productionTip = false;

Vue.prototype.$EventBus = new Vue();

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

（2）然后在content組件注冊(cè)一個(gè)自定義事件：

<template>
  <div class="content">
    <img alt="Vue logo" src="../assets/logo.png">
    <button @click="changeEvent">I am content!</button>
  </div>
</template>

<script>
export default {
  name: 'Content',
  methods: {
    changeEvent() {
      // 注冊(cè)一個(gè)自定義事件
      this.$EventBus.$emit("changeNum",123)
    }
  }
}
</script>

<style scoped>
button{
  width: 200px;
  height: 50px;
  display: block;
  margin: 0 auto;
  border: none;
  color: #fff;
  font-size: 20px;
  border-radius: 6px;
  background: #007ef3;
}
</style>

（3）在header組件監(jiān)聽接收這個(gè)值:

<template>
  <div class="header">
    <h1>{{headStr}}</h1>
  </div>
</template>

<script>
export default {
  name: 'Header',
  data(){
    return{
      headStr:"This is my head!"
    }
  },
  created() {
    // 監(jiān)聽接收這個(gè)值
    this.$EventBus.$on("changeNum", (val) => {
      this.headStr = val;
    });
   
  }
}
</script>

<style scoped>

</style>

點(diǎn)擊按鈕，header變化如下：

image.png

這樣就可以完成子組件與子組件之間的傳值了，當(dāng)然也可以用Vuex進(jìn)行子組件之間傳值。