在 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 constructor和instanceof,JSOO中的一对欢喜冤家
May 25 Javascript
style、 currentStyle、 runtimeStyle区别分析
Aug 01 Javascript
zeroclipboard复制到剪切板的flash
Aug 04 Javascript
jQuery多个input求和的实现方法
Feb 12 Javascript
javascript动态添加checkbox复选框的方法
Dec 23 Javascript
jQuery实现的购物车物品数量加减功能代码
Nov 16 Javascript
jQuery点击弹出层弹出模态框点击模态框消失代码分享
Jan 21 Javascript
浅谈原生JS中的延迟脚本和异步脚本
Jul 12 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
基于vue的tab-list类目切换商品列表组件的示例代码
Feb 14 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 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 fsockopen写的HTTP下载的类
2007/02/22 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
thinkphp自带验证码全面解析
2016/09/18 PHP
一段非常简单的让图片自动切换js代码
2006/11/10 Javascript
面向对象的javascript(笔记)
2009/10/06 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
javascript 实现map集合
2015/04/03 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
jQuery 实现图片的依次加载图片功能
2017/07/06 jQuery
vue中简单弹框dialog的实现方法
2018/02/26 Javascript
jQuery实现聊天对话框
2020/02/08 jQuery
js实现小星星游戏
2020/03/23 Javascript
python删除文件示例分享
2014/01/28 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
python调用java的jar包方法
2018/12/15 Python
pyqt5使用按钮进行界面的跳转方法
2019/06/19 Python
tensorflow 重置/清除计算图的实现
2020/01/19 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
纯CSS3实现漂亮的input输入框动画样式库(Text input love)
2018/12/29 HTML / CSS
HTML5中indexedDB 数据库的使用实例
2017/05/11 HTML / CSS
Html5在手机端调用相机的方法实现
2020/05/13 HTML / CSS
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
远程研修随笔感言
2014/02/10 职场文书
小学标准化建设汇报材料
2014/08/16 职场文书
支部书记四风对照材料
2014/08/28 职场文书
离职信范文
2015/06/23 职场文书
2016五一手机促销广告语
2016/01/28 职场文书
python绘制箱型图
2021/04/27 Python
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android