vue 元件間 8 大通訊方式 之三 eventBus
阿新 • • 發佈:2021-07-01
五、eventBus
eventBus
又稱為事件匯流排,在vue中可以使用它來作為溝通橋樑的概念, 就像是所有元件共用相同的事件中心,可以向該中心註冊傳送事件或接收事件, 所以元件都可以通知其他元件。
缺點:eventBus也有不方便之處, 當專案較大,就容易造成難以維護的災難
在Vue的專案中怎麼使用eventBus
來實現元件之間的資料通訊呢?具體通過下面幾個步驟
1. 初始化
首先需要建立一個事件匯流排並將其匯出, 以便其他模組可以使用或者監聽它.
// event-bus.js import Vue from 'vue' export const EventBus = new Vue()
2. 傳送事件
假設你有兩個元件:additionNum
和showNum
, 這兩個元件可以是兄弟元件也可以是父子元件;這裡我們以兄弟元件為例:
<template> <div> <show-num-com></show-num-com> <addition-num-com></addition-num-com> </div> </template> <script> import showNumCom from './showNum.vue' import additionNumCom from'./additionNum.vue' export default { components: { showNumCom, additionNumCom } } </script>
// addtionNum.vue 中傳送事件 <template> <div> <button @click="additionHandle">+加法器</button> </div> </template> <script> import {EventBus} from './event-bus.js' console.log(EventBus) exportdefault { data(){ return{ num:1 } }, methods:{ additionHandle(){ EventBus.$emit('addition', { num:this.num++ }) } } } </script>
3. 接收事件
// showNum.vue 中接收事件 <template> <div>計算和: {{count}}</div> </template> <script> import { EventBus } from './event-bus.js' export default { data() { return { count: 0 } }, mounted() { EventBus.$on('addition', param => { this.count = this.count + param.num; }) } } </script>
4. 移除事件監聽者
import { eventBus } from 'event-bus.js'
EventBus.$off('addition', {})