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

fxp 发布于2019-08-20 12:11 / 1544人阅读

摘要：一个事件中心插件，同时支持和原因重新梳理了事件系统，因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。推荐使用一个全局事件中心来分发和管理应用内的所有事件，详见文档。

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

服务器托管海外云主机事件的一个 Vue.js vue.js 属性 vue.js自学

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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