Vue 事件（Events）
made with Vuejs

Vue Events是一个Vue.js的简单事件处理插件，将Vue.prototype扩展为包括一个新的$events对象，该对象只是一个普通的vm，将用作全局事件总线。

$events vm带有几个标准事件方法及其别名：

安装

Npm

npm i vue-events

Yarn

yarn add vue-events

使用

触发事件

new Vue({

  data() {
    return {
      eventData: {
        foo: 'baz'
      }
    }
  },

  mounted() {
    this.$events.fire('testEvent', this.eventData);
    this.$events.emit('testEvent', this.eventData);
    this.$events.$emit('testEvent', this.eventData);
  }

})

监听事件

new Vue({
  mounted() {
    this.$events.listen('testEvent', eventData => console.log(eventData));
    this.$events.on('testEvent', eventData => console.log(eventData));
    this.$events.$on('testEvent', eventData => console.log(eventData));
  }
})

移除监听

new Vue({
  mounted() {
    this.$events.on('testEvent', eventData => console.log(eventData));
  },

  beforeDestroy() {
    this.$events.$off('testEvent')
    this.$events.off('testEvent')
    this.$events.remove('testEvent')
  }
})

通过event组件选项使用

new Vue({
  events: {
    testEvent(eventData){
       console.log(eventData)    
    }
  }  
})

在事件处理程序中，这将绑定到组件实例。通过这种方式，可以访问组件的data、props、 computed、 methods等，例如：

new Vue({
  events: {
    onShowAlert(message){
       this.modalVisible = true
       this.message = message
    }
  }  
})