2017-05-08T10:33:25Z||2017-05-08T10:33:25Z


第一种就是直接使用this.$emit

  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },  

然后接受者使用v-on即可:

<myComponent @increment="myHandler"></myComponent>

第二种是用一种中间对象来建立事件的传递,直接来自vuejs 2文档.

var bus = new Vue()

// in component A's method
bus.$emit('id-selected', 1)

// in component B's created hook
bus.$on('id-selected', function (id) {
  // ...
})

还可以用第三方的插件,本质上和第二种是一样的,只不过使用起来更方便些。比如这个:https://github.com/cklmercer/vue-events

使用插件:

import Vue from 'vue'
import VueEvents from 'vue-events'
Vue.use(VueEvents)

抛出事件:

this.$events.emit('testEvent', this.eventData);

接收事件:

this.$events.on('testEvent', eventData => console.log(eventData));

不需要声明任何中间对象,用this就好,很方便。