越寫悅快樂之Vue項目如何集成EventBus

今天的越寫悅快樂之系列文章爲大家帶來Vue項目如何集成EventBus。有過Vue開發經驗的小夥們都知道，多個組件之間進行數據的傳遞或者共享在Vue項目中很是常見，我們如何在不引入Vuex的情況下該如何共享數據呢？今天的文章我爲大家帶來這篇文章，希望大家喜歡。

Event是什麼

• Event是HTML中DOM對象中事件的狀態，它可以觸發頁面元素的行爲，比如鼠標 / 鍵盤屬性、事件句柄、以及多個瀏覽器支持的標準Event事件。
• 在Vue中表示一個Vue實例的方法，比如$on、$off、$emit等

開發環境

• Window 10.0.17763
• Node 10.15.3
• Yarn 1.16.0
• Vue 2.6.10

接入步驟

添加依賴

• CDN方式

<!-- development version -->
<script src="https://cdn.jsdelivr.net/npm/vue-bus/dist/vue-bus.js"></script>
<!-- production version -->
<script src="https://cdn.jsdelivr.net/npm/vue-bus/dist/vue-bus.min.js"></script>

• NPM方式

npm install vue-bus --save

• YARN方式

yarn add vue-bus -S

引入

我們在項目的入口文件src/main.js中使用Vue.use()來掛載到Vue對象上，可參考如下寫法：

import Vue from 'vue'
import VueBus from 'vue-bus'

Vue.use(VueBus)

使用

最後我們在組件文件Event.vue中提供的方法（組件生命週期）中聲明和監聽Bus，下面給出一個完整的Vue組件的定義：

<template>
  <div>
    <van-nav-bar 
      :title="pageTitle" 
      fixed/>
  </div>
</template>

<script>
import { NavBar, Toast } from 'vant'
export default {
  name: 'Event',
  components: {
    [NavBar.name]: NavBar,
    [Toast.name]: Toast
  },
  data() {
    return {
      // 頁面標題
      pageTitle: '我',
    }
  },
  created() {
    this.$bus.on('add-todo', this.addTodo);
  },
  beforeDestroy() {
    this.$bus.off('add-todo', this.addTodo);
  },
  methods: {
    addTodo() {
      this.$bus.emit('add-todo', { text: this.newTodoText });
      this.newTodoText = '';
    }
  }
}
</script>

<style lang="less" scoped>
.van-cell-group {
  margin-top: 48px;
}
</style>

那我們在組件創建和銷燬的過程中檢測到addTodo方法的調用，也就是精確控制頁面的行爲。

參考

• Bus
• Event

當然我們也可以從Vue中創建一個Bus對象，然後綁定到一個Vue實例上，然後在組件中使用this.$bus.on方法來註冊事件。

個人收穫和感想

通過以上知識點的梳理，我們知道了父子組件之間如何進行數據通信，以及不同組件之間如何共享數據，並通過合適的架構設計來保證業務中數據的共享和流動，同時爲後續的升級迭代提供可擴展的支持和平滑升級，我相信除了這種方式外，也會有其它數據通信的方式，在前端領域不斷更新變化的時代，我們只有深入底層理解原理，再加上一定經驗的實踐會給我們業務的發展提供充分有力的保障，更能打破信息壁壘，通過不同層次的學習方式來努力提升技術水平，構建更加穩定安全的產品或者服務，我相信產品的最大價值就是爲用戶不斷創造價值，對此我深信不疑，更希望大家保持學習的熱情，完善自己的知識技術體系，打造屬於我們自己的平臺或者產品。若是我的文章對你有所啓發，那將是我莫大的榮幸。