Vue 自定义事件实现组件间通信的方法

在 Vue 开发中，组件间通信是一个常见且重要的需求。自定义事件作为一种灵活有效的方式，能帮助开发者轻松实现不同组件之间的数据传递与交互。

了解一下什么是自定义事件。在 Vue 中，自定义事件是开发者根据业务需求自行定义的事件，通过在组件中触发和监听这些事件，实现组件间特定逻辑的通信。

在父子组件通信场景中，父组件向子组件传递数据可以通过 props 属性，而子组件向父组件传递数据则可以使用自定义事件。子组件通过 this.$emit('自定义事件名', 传递的数据) 来触发事件并携带数据。例如，在一个子组件 button 中，有一个点击事件，当按钮被点击时需要向父组件传递一个消息。我们可以在子组件中这样写：

<template>
  <button @click="sendMessage">点击</button>
</template>
<script>
export default {
  methods: {
    sendMessage() {
      this.$emit('button-click', '按钮被点击啦');
    }
  }
}
</script>

在父组件中，则通过在子组件标签上监听自定义事件来接收数据，如：

<template>
  <child-component @button-click="handleButtonClick"></child-component>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  methods: {
    handleButtonClick(message) {
      console.log(message);
    }
  }
}
</script>

对于非父子组件间的通信，即兄弟组件或跨级组件通信，自定义事件结合事件总线（Event Bus）也能很好地实现。先创建一个全局的事件总线对象，在需要通信的组件中引入该对象。发送组件通过事件总线对象触发自定义事件，接收组件则在自身创建周期函数中监听该事件。

Vue 自定义事件为组件间通信提供了强大且灵活的解决方案。熟练掌握自定义事件的使用方法，能极大提高 Vue 项目开发的效率和可维护性，让开发者更加流畅地构建复杂的前端应用。