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

栏目: JavaScript · 发布时间: 5年前

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 实例,编写回调函数时也更容易管理。

以上。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

JSP网站开发四“酷”全书

JSP网站开发四“酷”全书

万峰科技 / 电子工业出版社 / 2005-9 / 49.00元

本书以JSP为开发语言,选取当前最流行、最具代表性的4类网站:新闻站点、论坛、电子商城和博客(Blog)系统为例,详细介绍了使用JSP开发网站的核心技术。掌握了本书所举4类网站的开发技术,将帮助你成为网站开发的“全能冠军”。 本书结合作者多年在网站系统开发方面的经验,从系统的需求分析开始,确定系统的流程与设计,到模块的划分,再到数据加结构的设计,最后开始每个模块编程开发,贯穿了网站开......一起来看看 《JSP网站开发四“酷”全书》 这本书的介绍吧!

SHA 加密
SHA 加密

SHA 加密工具

html转js在线工具
html转js在线工具

html转js在线工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具