vue-bus: 一個 Vue.js 事件中心插件

fxp 發布于2019-08-20 12:11 / 1667人閱讀

摘要：一個事件中心插件，同時支持和原因重新梳理了事件系統，因為基于組件樹結構的事件流方式實在是讓人難以理解，并且在組件結構擴展的過程中會變得越來越脆弱。推薦使用一個全局事件中心來分發和管理應用內的所有事件，詳見文檔。

vue-bus

一個 Vue.js 事件中心插件，同時支持 Vue 1.0 和 2.0

原因

Vue 2.0 重新梳理了事件系統，因為基于組件樹結構的事件流方式實在是讓人難以理解，并且在組件結構擴展的過程中會變得越來越脆弱。雖然依然保留了父子組件間的事件流，但有諸多限制，比如不支持跨多層父子組件通信，也沒有解決兄弟組件間的通信問題。

Vue 推薦使用一個全局事件中心來分發和管理應用內的所有事件，詳見文檔。這是一個最佳實踐，同時適用于 Vue 1.0 和 2.0。你當然可以聲明一個全局變量來使用事件中心，但你如果在使用 webpack 之類的模塊系統，這顯然不合適。每次使用都手動 import 進來也很不方便，所以就有了這個插件：vue-bus

vue-bus 提供了一個全局事件中心，并將其注入每一個組件，你可以像使用內置事件流一樣方便的使用全局事件。

安裝

$ npm install vue-bus

如果在一個模塊化工程中使用它，必須要通過 Vue.use() 明確地安裝 vue-bus：

import Vue from "vue";
import VueBus from "vue-bus";

Vue.use(VueBus);

如果使用全局的 script 標簽，則無須如此（手動安裝）。

使用 監聽事件和清除監聽

// ...
created() {
  this.$bus.on("add-todo", this.addTodo);
  this.$bus.once("once", () => console.log("這個監聽器只會觸發一次"));
},
beforeDestroy() {
  this.$bus.off("add-todo", this.addTodo);
},
methods: {
  addTodo(newTodo) {
    this.todos.push(newTodo);
  }
}

觸發事件

// ...
methods: {
  addTodo() {
    this.$bus.emit("add-todo", { text: this.newTodoText });
    this.$bus.emit("once");
    this.newTodoText = "";
  }
}

注意：$bus.on $bus.once $bus.off $bus.emit 只是 $bus.$on $bus.$once $bus.$off $bus.$emit 的別名。詳見 API。

項目地址

GitHub，喜歡的話給個 Star 吧 :P

云服務器 GPU云服務器事件的一個 Vue.js vue.js 屬性 vue.js自學

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80838.html

Vue.js-狀態管理與Vuex

摘要：學習筆記狀態管理與狀態管理與非父子組件跨級組件和兄弟組件通信時，使用了中央事件總線的一個方法，用來觸發和接收事件，進一步起到通信的作用。倉庫包含了應用的數據狀態和操作過程。新建文件，并寫入的配置，會依賴此配置文件來使用編譯代碼。學習筆記：狀態管理與Vuex 狀態管理與Vuex 非父子組件（跨級組件和兄弟組件）通信時，使用了bus（中央事件總線）的一個方法，用來觸發和接收事件，進一步...

lykops 2019-08-23 16:03 評論0 收藏0
前端面試題總結——VUE（持續更新中）

摘要：前端面試題總結持續更新中是哪個組件的屬性模塊的組件。都提供合理的鉤子函數，可以讓開發者定制化地去處理需求。前端面試題總結——VUE（持續更新中） 1.active-class是哪個組件的屬性？ vue-router模塊的router-link組件。 2.嵌套路由怎么定義？在 VueRouter 的參數中使用 children 配置，這樣就可以很好的實現路由嵌套。 //引入兩個組件 ...

SimonMa 2019-08-22 16:08 評論0 收藏0
Vue.js-組件詳解

摘要：事件總線事件總線首先創建了一個名為的空的實例然后全局定義了組件最后創建了實例。在父組件模板中，子組件標簽上使用指定一個名稱，并在父組件內通過來訪問指定名稱的子組件。學習筆記：組件詳解組件詳解組件與復用 Vue組件需要注冊后才可以使用。注冊有全局注冊和局部注冊兩種方式。全局注冊 Vue.component(my-component, {}); 要在父實例中使用這個組件，必須要...

jeffrey_up 2019-08-23 16:02 評論0 收藏0
vue面試

摘要：雖然計算屬性在大多數情況下更合適，但有時也需要一個自定義的偵聽器，當需要在數據變化時執行異步或開銷較大的操作時，通過偵聽器最有用。路由的鉤子函數首頁可以控制導航跳轉，，等，一般用于頁面的修改。談談你對MVVM開發模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數據模型，數據和業務邏輯都在Model層中定義；View 代表UI視圖，負責數據的展示；...

vspiders 2019-08-23 18:38 評論0 收藏0
Vue UI：Vue開發者必不可少的工具

摘要：基于整個開發者社區的反饋而大幅度改良，該版本提供了很多以工作流為中心的工具。我想會提升每一位的開發者工作效率的特性就是。開始首先，我們確保安裝了最新的。自從年雙十一正式上線，累計處理了億錯誤事件，付費客戶有金山軟件百姓網等眾多品牌企業。譯者按： Vue開發工具越來越好用了！原文: Vue UI: A First Look 譯者: Fundebug 本文采用意譯，版權歸原作者...

jsyzchen 2019-08-23 16:49 評論0 收藏0