Vue2子组件之间的通信

vue2子组件之间通信

大多数应用程序要求组件与其父组件或子组件进行通信。推荐的方法是实施一个状态管理解决方案，例如 Vuex（官方的，支持的Flux类实现）甚至VueStash。
但是，对于相对简单的应用程序来说，这可能会带来一些开销，您只需要少量的跨组件通信。这是您可以使用全局事件总线的地方。

为了使您的应用程序中的任何地方可用，您可以将其附加到Vue全局对象。
const EventBus = new Vue()

Object.defineProperties(Vue.prototype, {
  $bus: {
    get: function () {
      return EventBus
    }
  }
})

触发全局事件
1.您现在可以触发组件中的事件：

export default {
  name: 'my-component',
  methods: {
    triggerMyEvent () {
      this.$bus.$emit('my-event', { ... pass some event data ... })
    }
}

2.或直接在您的HTML模板
<div>
  <button @click="$bus.$emit('my-event')">Click to trigger event</button>
</div>


监听事件
事件可以在任何组件中收听。

export default {
  name: 'my-component',
  created () {
    this.$bus.$on('my-event', ($event) => {
      console.log('My event has been triggered', $event)
    })
  }
}

包括事件总线组件本身
const EventBus = new Vue({
  created () {
    this.$on('my-event', this.handleMyEvent)
  },
  methods: {
    handleMyEvent ($event) {
      console.log('My event caught in global event bus', $event)
    }
  }
})