如何处理派遣和广播的弃用（公交活动模式）

你可能已经意识到 $emit 的作用域是发出事件的组件。当你希望在组件树中远离彼此的组件之间进行通信时，这是一个问题。

注意： 在 Vue1 中你可以使用 $dispatch 或 $broadcast，但不能使用 Vue2。原因是它不能很好地扩展。有一个流行的 bus 模式来管理这个：

DEMO

HTML

<script type="x-template" id="sender">
  <button @click="bus.$emit('new-event')">Click me to send an event !</button>
</script>
 
<script type="x-template" id="receiver">
  <div>I received {{numberOfEvents}} event{{numberOfEvents == 1 ? '' : 's'}}</div>
</script>
 
<sender></sender>
<receiver></receiver>

JS

var bus = new Vue();
 
var senderComponent = {
  template: '#sender',
  data() {
    return {
      bus: bus
    }
  }
};
 
var receiverComponent = {
  template: '#receiver',
  data() {
    return {
      numberOfEvents: 0
    }
  },
  ready() {
    var self = this;
 
    bus.$on('new-event', function() {
      ++self.numberOfEvents;
    });
  }
};
 
new Vue({
  el: 'body',
  components: {
    'sender': senderComponent,
    'receiver': receiverComponent
  }
});

你只需要了解任何 Vue() 实例都可以通过 $emit 捕捉（$on）一个事件。我们只是声明一个全局 Vue 实例调用 bus 然后具有此变量的任何组件都可以从中发出并捕获事件。只需确保组件可以访问 bus 变量。