怎么在Vue.js中使用全局事件

这篇文章给大家介绍怎么在Vue.js中使用全局事件，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。

 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.js中使用全局事件就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。