Vue中的情侣属性$dispatch和$broadcast详解

在Vue.js中存在两个情侣属性：$dispatch和$broadcast。它们的作用是让不同层级的组件之间进行通信。本文将详细讲解这两个属性的用法以及示例说明。

$dispatch

$dispatch是向父级组件派发一个自定义事件，触发父级组件的自定义事件处理器。该属性接收两个参数：事件名称和事件参数。父级组件可以通过在template的子组件上使用v-on指令监听自定义事件，并在methods中编写处理函数。

示例：

// 子组件
Vue.component('son', {
  methods: {
    handleClick () {
      this.$dispatch('dispatchEvent', 'hello world!');
    }
  }
});

// 父组件
new Vue({
  el: '#app',
  methods: {
    handleEvent (msg) {
      console.log(msg); // 输出："hello world!"
    }
  },
  template: `
    <div>
      <son @dispatchEvent="handleEvent"></son>
    </div>
  `
});

在该示例中，子组件son中的handleClick方法中使用$dispatch方法派发自定义事件，并传递了一个字符串作为事件参数。父组件中使用v-on指令监听son组件的dispatchEvent事件，并在methods中编写处理函数handleEvent。当子组件中的handleClick方法被触发时，就会派发dispatchEvent事件，父组件中的handleEvent方法就会被执行。

需要注意的是，$dispatch是向上寻找组件树中最近的父级组件，如果找到最顶层的祖先组件还没有找到处理器，事件就会被忽略。

$broadcast

$broadcast是向子级组件广播一个自定义事件，触发所有子级组件的自定义事件处理器。该属性接收两个参数：事件名称和事件参数。子级组件可以通过在template的子组件上使用v-on指令监听自定义事件，并在methods中编写处理函数。

示例：

// 子组件
Vue.component('son', {
  template: `
    <div>
      <h4>{{ msg }}</h4>
      <template v-if="children">
        <son v-for="child in children" :msg="child.msg"></son>
      </template>
    </div>
  `,
  props: {
    msg: String
  },
  data () {
    return {
      children: []
    }
  },
  methods: {
    handleEvent (msg) {
      console.log(msg); // 输出："hello world!"
    }
  },
  mounted () {
    this.$broadcast('broadcastEvent', 'hello world!');
  }
});

// 父组件
new Vue({
  el: '#app',
  template: `
    <div>
      <son :msg="msg"></son>
    </div>
  `,
  data () {
    return {
      msg: 'parent'
    }
  },
  methods: {
    handleEvent (msg) {
      console.log(msg); // 输出："hello world!"
    }
  },
  mounted () {
    this.$on('broadcastEvent', this.handleEvent);
  }
});

在该示例中，父组件中渲染了一个子组件son，并通过props将msg传递给子组件。子组件son中使用mounted生命周期钩子函数，在组件挂载完成后使用$broadcast方法广播自定义事件broadcastEvent，并传递了一个字符串作为事件参数。子组件中使用v-for指令渲染了多个子组件，并通过props传递了不同的msg值。子组件中也使用了v-on指令监听broadcastEvent事件，并在methods中编写处理函数handleEvent。当组件son发出broadcastEvent事件时，所有子组件的handleEvent方法都会被执行。

需要注意的是，$broadcast是向下寻找组件树中所有子级组件，并触发它们的自定义事件处理器。但是，当子级组件进行任何更新操作时，父级组件的相应部分都会重新渲染。因此，建议只在静态的、不要求响应的组件树中使用$broadcast。

总结

$dispatch和$broadcast是Vue.js中的两个情侣属性，用于跨组件通信。$dispatch用于向父组件派发事件，$broadcast用于向子组件广播事件。使用这两个属性能够减少代码耦合度，提高组件的可重用性，但需要注意组件树的结构和更新问题。