[30天 Vue学好学满 DAY17] Event Bus

Event Bus

前面提到了父子元件透过emit & prop进行参数传递，当树状结构逐渐复杂时，在传递上复杂度也越来越高。
ex: 两个子元件互相传递时(子元件1 -> 子元件2)
子元件1 -> 父元件1 -> 子元件2

避免复杂的跨组沟通，可使用vuex以及Event Bus进行处理。

Event Bus 四个方法:
$on: 监听
$once: 监听一次
$off: 取消监听
$emit: 传递事件

最好於created即进行监听，beforeDestroy进行取消。

实作结构图

对Event Bus 而言

程序实作

main.js

引入bus

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

子元件 Event

HTML

<h1>Event 计数器: {{ count }}</h1>
<button @click="addCount">Event计数钮</button>

Data (三个组件皆预设: 0)

count: 0

定义方法addCount (count+1 & 传递事件、值)

 addCount: function () {
     // 透过emit传递
     this.count += 1;
     this.$bus.$emit("add-count", this.count);
 }

父元件 App

HTML

<h1>App 计数器: {{ count }}</h1>
<!-- 引入子元件 -->
<Event/>
<Bus/>

生命周期 created 注册监听

created() {
    // 注册监听 $once 监听一次
    this.$bus.$once("add-count", val => {
      this.count = val;
    });
},

生命周期 beforeDestroy 取消监听

beforeDestroy() {
    // 监听需於销毁前取消
    this.$bus.$off("add-count");
},

子元件 Bus

HTML

<h1>Bus计数器: {{ count }}</h1>

生命周期 created 注册监听

created() {
    // 注册监听 $on 持续监听
    this.$bus.$on("add-count", val => {
      this.count = val;
    });
},

生命周期 beforeDestroy 与父元件相同

起前端验证

Event Bus 可视为对全域发出事件与资料，但不是用於较为复杂的系统，较为复杂、庞大的系统则透过vuex进行全域控制较佳。

以上范例为vue 2，vue 3已移除Event Bus相关用法，透过Mitt进行替代。

有错误请不吝指教!
参考资料
https://vuejs.org/v2/guide
https://medium.com/itsems-frontend/vue-event-bus-15b76f27aeb9
https://ithelp.ithome.com.tw/articles/10242193
感谢各路大神