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

2019-11-19 12:11:08

字体：大中小

来源：转载

供稿：网友

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

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

以下为 mixin 文件代码

// event-mixin.jsexport 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.vueexport default {  name: 'a',  events: {    'evt.a': 'handlerA',    'evt.b'() {      console.log('B triggered')    }  },  methods: {    handlerA() {      console.log('A triggered')    }  }}

// b.vueexport default {  name: 'b',  events: {    'evt.b'() {      console.log('B triggered again')    }  }}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：JS字典Dictionary类定义与用法示例

下一篇：微信小程序实现的动态设置导航栏标题功能示例