【原创】Vue 全局事件总线 Global Event Bus

全局事件总线

可以实现任意组件间的通信。

new Vue({
el:'#app',
render:h=>h(App),
beforeCreate(){
Vue.property.$bus = this;
}
})

绑定事件方：

  mounted () {
    this.$bus.$on('checkTodo', this.checkTodo);
    this.$bus.$on('deleteTodo', this.deleteTodo);
  },
  beforeDestroy () {
    this.$off(['checkTodo', 'deleteTodo']);
  }

调用事件方：

methods: {
    handleCheck (id) {
      this.$bus.$emit('checkTodo', id);
    },
    del (id) {
      if (confirm('确定删除吗？')) {
        this.$bus.$emit('deleteTodo', id);
      }
    }
  }