如何處理派遣和廣播的棄用（公交活動模式）

你可能已經意識到 $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 變數。