成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue-bus: 一個(gè) Vue.js 事件中心插件

fxp / 1675人閱讀

摘要：一個(gè)事件中心插件，同時(shí)支持和原因重新梳理了事件系統(tǒng)，因?yàn)榛诮M件樹結(jié)構(gòu)的事件流方式實(shí)在是讓人難以理解，并且在組件結(jié)構(gòu)擴(kuò)展的過(guò)程中會(huì)變得越來(lái)越脆弱。推薦使用一個(gè)全局事件中心來(lái)分發(fā)和管理應(yīng)用內(nèi)的所有事件，詳見(jiàn)文檔。

vue-bus

一個(gè) Vue.js 事件中心插件，同時(shí)支持 Vue 1.0 和 2.0

原因

Vue 2.0 重新梳理了事件系統(tǒng)，因?yàn)榛诮M件樹結(jié)構(gòu)的事件流方式實(shí)在是讓人難以理解，并且在組件結(jié)構(gòu)擴(kuò)展的過(guò)程中會(huì)變得越來(lái)越脆弱。雖然依然保留了父子組件間的事件流，但有諸多限制，比如不支持跨多層父子組件通信，也沒(méi)有解決兄弟組件間的通信問(wèn)題。

Vue 推薦使用一個(gè)全局事件中心來(lái)分發(fā)和管理應(yīng)用內(nèi)的所有事件，詳見(jiàn)文檔。這是一個(gè)最佳實(shí)踐，同時(shí)適用于 Vue 1.0 和 2.0。你當(dāng)然可以聲明一個(gè)全局變量來(lái)使用事件中心，但你如果在使用 webpack 之類的模塊系統(tǒng)，這顯然不合適。每次使用都手動(dòng) import 進(jìn)來(lái)也很不方便，所以就有了這個(gè)插件：vue-bus

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

安裝 
$ npm install vue-bus

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

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

Vue.use(VueBus);

如果使用全局的 script 標(biāo)簽，則無(wú)須如此（手動(dòng)安裝）。

使用 監(jiān)聽(tīng)事件和清除監(jiān)聽(tīng) 
// ...
created() {
  this.$bus.on("add-todo", this.addTodo);
  this.$bus.once("once", () => console.log("這個(gè)監(jiān)聽(tīng)器只會(huì)觸發(fā)一次"));
},
beforeDestroy() {
  this.$bus.off("add-todo", this.addTodo);
},
methods: {
  addTodo(newTodo) {
    this.todos.push(newTodo);
  }
}
觸發(fā)事件 
// ...
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 的別名。 詳見(jiàn) API。

項(xiàng)目地址

GitHub，喜歡的話給個(gè) Star 吧 :P

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80838.html

相關(guān)文章

  • Vue.js-狀態(tài)管理與Vuex

    摘要：學(xué)習(xí)筆記狀態(tài)管理與狀態(tài)管理與非父子組件跨級(jí)組件和兄弟組件通信時(shí)，使用了中央事件總線的一個(gè)方法，用來(lái)觸發(fā)和接收事件，進(jìn)一步起到通信的作用。倉(cāng)庫(kù)包含了應(yīng)用的數(shù)據(jù)狀態(tài)和操作過(guò)程。新建文件，并寫入的配置，會(huì)依賴此配置文件來(lái)使用編譯代碼。 學(xué)習(xí)筆記：狀態(tài)管理與Vuex 狀態(tài)管理與Vuex 非父子組件（跨級(jí)組件和兄弟組件）通信時(shí)，使用了bus（中央事件總線）的一個(gè)方法，用來(lái)觸發(fā)和接收事件，進(jìn)一步...

    lykops 評(píng)論0 收藏0

  • 前端面試題總結(jié)——VUE（持續(xù)更新中）

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

    SimonMa 評(píng)論0 收藏0

  • Vue.js-組件詳解

    摘要：事件總線事件總線首先創(chuàng)建了一個(gè)名為的空的實(shí)例然后全局定義了組件最后創(chuàng)建了實(shí)例。在父組件模板中，子組件標(biāo)簽上使用指定一個(gè)名稱，并在父組件內(nèi)通過(guò)來(lái)訪問(wèn)指定名稱的子組件。 學(xué)習(xí)筆記：組件詳解 組件詳解 組件與復(fù)用 Vue組件需要注冊(cè)后才可以使用。注冊(cè)有全局注冊(cè)和局部注冊(cè)兩種方式。 全局注冊(cè) Vue.component(my-component, {}); 要在父實(shí)例中使用這個(gè)組件，必須要...

    jeffrey_up 評(píng)論0 收藏0

  • vue面試

    摘要：雖然計(jì)算屬性在大多數(shù)情況下更合適，但有時(shí)也需要一個(gè)自定義的偵聽(tīng)器，當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開銷較大的操作時(shí)，通過(guò)偵聽(tīng)器最有用。路由的鉤子函數(shù)首頁(yè)可以控制導(dǎo)航跳轉(zhuǎn)，，等，一般用于頁(yè)面的修改。 談?wù)勀銓?duì)MVVM開發(fā)模式的理解 MVVM分為Model、View、ViewModel三者。Model 代表數(shù)據(jù)模型，數(shù)據(jù)和業(yè)務(wù)邏輯都在Model層中定義；View 代表UI視圖，負(fù)責(zé)數(shù)據(jù)的展示；...

    vspiders 評(píng)論0 收藏0

  • Vue UI：Vue開發(fā)者必不可少的工具

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

    jsyzchen 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<