在 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 相关文章推荐
js window.event对象详尽解析
Feb 17 Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 Javascript
javascript OFFICE控件测试代码
Dec 08 Javascript
jCallout 轻松实现气泡提示功能
Sep 22 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
JavaScript中的toUTCString()方法使用详解
Jun 12 Javascript
深入理解JavaScript中的浮点数
May 18 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
JS实现拖拽的方法分析
Dec 20 Javascript
jQuery实现在新增加的元素上添加事件方法案例分析
Feb 09 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
Vue实现按钮级权限方案
Nov 21 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
php 模拟get_headers函数的代码示例
2013/04/27 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
php中__toString()方法用法示例
2016/12/07 PHP
利用php-cli和任务计划实现订单同步功能的方法
2017/05/03 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
PHP实现提取多维数组指定一列的方法总结
2019/12/04 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
jQuery的一些注意
2006/12/06 Javascript
从JavaScript的函数重名看其初始化方式
2007/03/08 Javascript
alixixi runcode.asp的代码不错的应用
2007/08/08 Javascript
JavaScript如何从listbox里同时删除多个项目
2013/10/12 Javascript
javascript上传图片前预览图片兼容大多数浏览器
2013/10/25 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
Jquery实现select multiple左右添加和删除功能的简单实例
2016/05/26 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
使用node.js实现微信小程序实时聊天功能
2018/08/13 Javascript
ionic+html5+API实现双击返回键退出应用
2019/09/17 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
python 读取视频,处理后,实时计算帧数fps的方法
2018/07/10 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
Tensorflow 使用pb文件保存(恢复)模型计算图和参数实例详解
2020/02/11 Python
Python改变对象的字符串显示的方法
2020/08/01 Python
Python将QQ聊天记录生成词云的示例代码
2021/02/10 Python
C++面试题目
2013/06/25 面试题
什么叫做SQL注入,如何防止
2016/10/04 面试题
初婚初育证明
2014/01/14 职场文书
外语系毕业生求职自荐信
2014/04/12 职场文书
广播体操比赛口号
2014/06/10 职场文书
十大动画制作软件,Adobe产品上榜两款,第一是行业标准软件
2022/03/18 杂记
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js