Vue之自定义事件内容分发详解

Vue.js允许我们使用自定义事件来在组件之间传递数据。自定义事件需要发出方在适当的时候触发事件，接收方在实例中监听对应的事件。Vue.js给我们提供了$emit和$on方法来实现自定义事件。

自定义事件的分发可以使用一般的事件模型，也可以使用特殊的$emit方法来进行分发，让每个组件都有机会响应这个事件。

实现自定义事件

Vue.js有自己的事件系统，它支持添加，删除和遍历监听器。要在Vue.js中实现自定义事件，需要使用$emit方法。

以下两个示例将展示如何使用$emit和自定义事件来分发数据。

示例1 - 简单的父子组件通讯

假设有一个父组件和一个子组件，父组件需要向子组件发送数据。以下是父组件的实现：

<template>
  <div>
    <h2>父组件</h2>
    <button @click="sendMessage">发送消息</button>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue';

  export default {
    components: {
      ChildComponent,
    },
    data() {
      return {
        parentMessage: '',
      };
    },
    methods: {
      sendMessage() {
        this.parentMessage = '来自父组件的消息';
        this.$emit('parent-message', this.parentMessage);
      },
    },
  };
</script>

在父组件的模板中，我们有一个按钮和一个子组件。当按钮点击时，将触发sendMessage方法并向子组件发送一个自定义事件parent-message，同时将消息parentMessage作为事件的参数。事件被分派到子组件实例中，并由子组件实例处理。

以下是子组件的实现：

<template>
  <div>
    <h2>子组件</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    props: {
      message: {
        type: String,
        required: true,
      },
    },
    data() {
      return {
        childMessage: '',
      };
    },
    mounted() {
      this.$on('parent-message', this.getMessage);
    },
    methods: {
      getMessage(message) {
        this.childMessage = message;
      },
    },
  };
</script>

在子组件的模板中，我们只有一个消息框，将在接收到父组件的事件后显示出来。在组件实例初始化完成后，我们使用$on方法监听自定义事件parent-message，并将其处理程序设置为getMessage。每当事件被分发到子组件实例时，getMessage方法将被调用，并更新消息框中的内容。

示例2 - 多层级组件通讯

在现实的应用程序中，我们常常需要实现多层级的组件通讯。以下是一个实现多层级组件通讯的示例：

<template>
  <div>
    <h2>根组件</h2>
    <button @click="sendMessage">发送消息</button>
    <middle-component></middle-component>
  </div>
</template>

<script>
  import MiddleComponent from './MiddleComponent.vue';

  export default {
    components: {
      MiddleComponent,
    },
    data() {
      return {
        parentMessage: '',
      };
    },
    methods: {
      sendMessage() {
        this.parentMessage = '来自根组件的消息';
        this.$emit('parent-message', this.parentMessage);
      },
    },
  };
</script>

在根组件模板中，我们有一个按钮和一个中间组件。当按钮被点击时，将触发sendMessage方法，并向中间组件发送一个自定义事件parent-message，同时将消息parentMessage作为事件参数。在接收到的事件分发到子组件时，每个子组件将有机会从该事件中接收数据并做相应的处理。

以下是中间组件和子组件的实现：

<template>
  <div>
    <h2>中间组件</h2>
    <child-component></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue';

  export default {
    components: {
      ChildComponent,
    },
    mounted() {
      this.$on('parent-message', this.getMessage);
    },
    methods: {
      getMessage(message) {
        this.$emit('middle-message', message);
      },
    },
  };
</script>

在这个示例中，中间组件只是一个占位符。中间组件在初始化后，使用$on方法监听自定义事件parent-message，并将其处理程序设置为getMessage。每当事件被分发到中间组件实例时，getMessage方法将被调用，并使用$emit方法将该事件分发到子组件。

<template>
  <div>
    <h2>子组件</h2>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        childMessage: '',
      };
    },
    mounted() {
      this.$on('middle-message', this.getMessage);
    },
    methods: {
      getMessage(message) {
        this.childMessage = message;
      },
    },
  };
</script>

在子组件中，我们只有一个消息框，将在接收中间组件来的消息后显示出来。在子组件实例初始化完成后，我们使用$on方法监听自定义事件middle-message，并将其处理程序设置为getMessage。每当事件被分发到子组件实例时，getMessage方法将被调用，并更新消息框中的内容。

总结

Vue.js的自定义事件分发机制可以使我们轻松实现复杂的组件通讯任务。在本文中，我们看到了如何使用$emit和自定义事件来在组件中传递数据，以及如何在多层级组件中使用自定义事件来实现通信。自定义事件是Vue.js的一项强大功能，可将您的组件处理逻辑更清晰地分隔开来。