在 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 二维数组
Nov 26 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
jQuery实现图片轮播特效代码分享
Sep 15 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
JS实现动态添加DOM节点和事件的方法示例
Apr 28 Javascript
PostgreSQL Node.js实现函数计算方法示例
Feb 12 Javascript
彻底揭秘keep-alive原理(小结)
May 05 Javascript
javascript 构建模块化开发过程解析
Sep 11 Javascript
JavaScript Array对象使用方法解析
Sep 24 Javascript
JS中间件设计模式的深入探讨与实例分析
Apr 11 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
微信小程序实现的动态设置导航栏标题功能示例
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
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
使Ext的Template可以解析二层的json数据的方法
2007/12/22 Javascript
语义化 H1 标签
2008/01/14 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
js如何获取兄弟、父类等节点
2014/01/06 Javascript
基于jquery实现的可编辑下拉框实现代码
2014/08/02 Javascript
javascript实现label标签跳出循环操作
2016/03/06 Javascript
Javascript点击其他任意地方隐藏关闭DIV实例
2016/06/21 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
mpvue小程序仿qq左滑置顶删除组件
2018/08/03 Javascript
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
微信小程序中使用echarts的实现方法
2019/04/24 Javascript
Vue前端项目部署IIS的实现
2020/01/06 Javascript
利用matplotlib+numpy绘制多种绘图的方法实例
2017/05/03 Python
python如何实现反向迭代
2018/03/20 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
python 监听salt job状态,并任务数据推送到redis中的方法
2019/01/14 Python
python sort、sort_index方法代码实例
2019/03/28 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
Python之pymysql的使用小结
2019/07/01 Python
简单了解python数组的基本操作
2019/11/26 Python
浅谈Python中的生成器和迭代器
2020/06/19 Python
Python docutils文档编译过程方法解析
2020/06/23 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
abstract class和interface有什么区别
2013/08/04 面试题
旺仔牛奶广告词
2014/03/20 职场文书
村级换届选举方案
2014/05/10 职场文书
表彰大会策划方案
2014/05/13 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
2014年副班长工作总结
2014/12/10 职场文书
2015年小学实验室工作总结
2015/07/28 职场文书
全民创业工作总结
2015/08/13 职场文书