自定义事件 $emit / $on

單向數據流，數據只能從父組件傳入子組件， 子組件用 props 屬性接收父組件数据。 若子組件需要改變父組件的數據：

使用 $on (eventName) 监听事件 使用 $emit (eventName) 触发事件 父组件可以在子组件身上用 v-on 来监听子组件触发的事件。 然后再对应「子组件方法」执行处触发事件，两者缺一不可。

(事件處理器就是 function)

<!-- 父组件 #app -->
<div id="app">
  <!-- 子组件 myson -->
  <myson v-on:son_method="father_method"></myson>
  <!-- 父组件在子組件身上，用 v-on 監聽子组件触发的 son_method -->
  <!-- 子组件內部要用 $emit 觸發 son_method -->
</div>

// 子组件
Vue.component('myson', {
  template: '<button v-on:click="son_method">子按钮</button>',
  methods: {
    // 按钮点击时候触发 son_method 事件
    son_method: function () {
      console.log("son");
      this.$emit('son_method');
      // 用 $emit 將事件發射出去 (可含參數)，
      // 父組件中的子組件模板，须用 v-on 配合接收事件，
      // 因此觸發相應的父組件事件處理器，去更改父組件數據。
      // 子組件再被動更新數據。
    }
  },
}); 

// 父组件
new Vue({
  el: "#app",
  methods: {
    father_method: function () {
      console.log("father");
    }
  }
});

$emit

Event Bus

是一個設計概念，即「事件管理平台」，專門管理事件的發送、監聽。 就像一個廣播中心，你可以請求廣播中心 "發出" $emit 特定事件、 也可以透過它指定 "監聽" $on 該事件。

方法：

• this.eventBus.$on( event, callback ) : ('on xxx'：'監聽 xxx 事件') | 用於父層元件，接收事件。
• this.eventBus.$off( [event, callback] ) : 移除監聽的事件
• this.eventBus.$emit( event, […args] ) : (emit：放射，'emit xxx'：'發出 xxx 事件') | 用於子元件，向上傳遞事件與資料，事件可以自訂義。

https://ithelp.ithome.com.tw/articles/10186219

釋義

// $bus : 事件管理中心
this.$bus.$emit( 'onUpdateWidget', obj );
// "事件管理中心" 發出 'onUpdateWidget' 事件、並傳遞參數 obj
this.$bus.$on( 'xxx', callback )
// "事件管理中心" 監聽 'xxx' 事件、發生就執行 callback