在 Vue.js中优雅地使用全局事件的方法


Posted in Javascript onFebruary 01, 2019

Vue 2.0 版本中取消了 v1 中的 $broadcast 方法,因此要使用全局事件时,不可避免地会使用到 event-bus 之类的方法,本文旨在提出一种不需要用到 event-bus 的全局事件使用方法。

主要思路是将事件全部绑定在 $root 上,并为所有全局事件添加一个前缀防止冲突,再通过向 $options 上注入新的 key 来简化使用方式。

以下为 mixin 文件代码

// event-mixin.js
export default {
 created() {
  if (this.$options.events) {
   Object.keys(this.$options.events).forEach(key => {
    let handler = this.$options.events[key]
    if (typeof handler === 'string') {
     handler = this[handler]
    }
    this[key + '::handler'] = handler.bind(this)
    this.$root.$on('global::' + key, this[key + '::handler'])
   })
  }
 },
 beforeDestroy() {
  if (this.$options.events) {
   Object.keys(this.$options.events).forEach(key => {
    this.$root.$off('global::' + key, this[key + '::handler'])
   })
  }
 }
}

使用前先在 main.js 中调用 mixin

Vue.mixin(require('./event-mixin.js').default)
在各个组件中,向 $root 发送事件即可

// a.vue
export default {
  name: 'a',
  events: {
    'evt.a': 'handlerA',
    'evt.b'() {
      console.log('B triggered')
    }
  },
  methods: {
    handlerA() {
      console.log('A triggered')
    }
  }
}
// b.vue
export default {
  name: 'b',
  events: {
    'evt.b'() {
      console.log('B triggered again')
    }
  }
}
// c.vue
export default {
  name: 'c',
  created() {
    this.$root.$emit('global::evt.a') // 'A triggered'
    this.$root.$emit('global::evt.b', 'data') // 'B triggered', 'B triggered again'
    // 使用以上方式触发,也可以在 mixin 中向实例添加专用触发方法
  }
}

使用这种方法,可以避免新建专门用于传输事件的 vue 实例,编写回调函数时也更容易管理。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中RegExp保留小数点后几位数的方法分享
Aug 13 Javascript
js单例模式详解实例
Nov 21 Javascript
jquery列表拖动排列(由项目提取相当好用)
Jun 17 Javascript
javascript中indexOf技术详解
May 07 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
Aug 17 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
微信小程序 wxapp内容组件 icon详细介绍
Oct 31 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
Vue2.0实现组件数据的双向绑定问题
Mar 06 Javascript
使用electron将vue-cli项目打包成exe的方法
Sep 29 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 #Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
Jan 31 #Javascript
JS基于对象的链表实现与使用方法示例
Jan 31 #Javascript
JS栈stack类的实现与使用方法示例
Jan 31 #Javascript
JQuery中queue方法用法示例
Jan 31 #jQuery
JavaScript两种计时器的实例讲解
Jan 31 #Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 #Javascript
You might like
不用GD库生成当前时间的PNG格式图象的程序
2006/10/09 PHP
php实现构建排除当前元素的乘积数组方法
2018/10/06 PHP
js中关于String对象的replace使用详解
2011/05/24 Javascript
$.ajax返回的JSON无法执行success的解决方法
2011/09/09 Javascript
jQuery 追加元素的方法如append、prepend、before
2014/01/16 Javascript
jquery使用remove()方法删除指定class子元素
2015/03/26 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
jquery实现点击变换导航样式的方法
2015/08/31 Javascript
基于vue.js实现图片轮播效果
2016/12/01 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
初探js和简单隐藏效果的实例
2017/11/23 Javascript
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
2018/08/28 jQuery
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
vue实现多条件和模糊搜索功能
2019/05/28 Javascript
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
深入理解Vue keep-alive及实践总结
2019/08/21 Javascript
vue过滤器实现日期格式化的案例分析
2020/07/02 Javascript
详解Python中的多线程编程
2015/04/09 Python
详谈python在windows中的文件路径问题
2018/04/28 Python
Python用5行代码写一个自定义简单二维码
2018/10/21 Python
详解Python爬取并下载《电影天堂》3千多部电影
2019/04/26 Python
PyCharm设置Ipython交互环境和宏快捷键进行数据分析图文详解
2020/04/23 Python
Python实现简单猜数字游戏
2021/02/03 Python
求高于平均分的学生学号及成绩
2016/09/01 面试题
工人先进事迹材料
2014/12/26 职场文书
表扬通报怎么写
2015/01/16 职场文书
刘胡兰观后感
2015/06/16 职场文书
学校2016年圣诞节活动总结
2016/03/31 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
CSS3实现的3D隧道效果
2021/04/27 HTML / CSS
Python快速优雅的批量修改Word文档样式
2021/05/20 Python
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python