事件

元件與其祖先/後代通訊的方式之一是通過自定義通訊事件。所有 Vue 例項也是發射器並實現自定義事件介面,以促進元件樹內的通訊。我們可以使用以下內容:

  • $on:聽取這些元件祖先或後代發出的事件。
  • $broadcast:發出一個向下傳播給所有後代的事件。
  • $dispatch:發出一個事件,該事件首先在元件本身上觸發,然後向上傳播到所有祖先。
  • $emit:觸發自我事件。

例如,我們希望在表單提交時隱藏表單元件內的特定按鈕元件。在父元素上:

var FormComponent = Vue.extend({
  // ...
  components: {
    ButtonComponent
  },
  methods: {
    onSubmit () {
        this.$broadcast('submit-form')
    }
  }
})

在子元素上:

var FormComponent = Vue.extend({
  // ...
  events: {
    'submit-form': function () {
        console.log('I should be hiding');
    }
  }
})

要注意的一些事項:

  • 每當一個事件發現一個正在偵聽它並被觸發的元件時,它將停止傳播,除非該元件中的函式回撥返回 true
  • $dispatch() 總是先觸發發射它的元件。
  • 我們可以將任意數量的引數傳遞給事件處理程式。做 this.$broadcast('submit-form', this.formData, this.formStatus) 允許我們訪問像'submit-form': function (formData, formStatus) {} 這樣的引數