事件

组件与其祖先/后代通信的方式之一是通过自定义通信事件。所有 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) {} 这样的参数