Vue中的自定义事件

一、前言

在 Vue 的组件化开发中，组件之间的数据通信是构建复杂应用的关键。而其中最常见、最推荐的方式之一就是通过 自定义事件（Custom Events） 来实现父子组件之间的交互。

本文将带你深入了解：

• Vue 中事件的基本概念
• 如何在子组件中触发自定义事件
• 如何在父组件中监听并处理这些事件
• 自定义事件的命名规范与最佳实践
• Vue 2 与 Vue 3 在事件处理上的差异对比

掌握 Vue 自定义事件的使用方法，是构建可维护、高内聚组件系统的基础。

二、什么是 Vue 的自定义事件？

在 Vue 中，自定义事件（Custom Events） 是子组件向父组件传递信息的一种机制。它允许我们在子组件中定义一个事件名称，并在某个操作发生时触发这个事件，然后由父组件监听该事件并做出响应。

📌 通俗理解：

• 子组件说：“我做了某件事！”
• 父组件听到了，并回应：“我知道了，我会做相应的处理。”

三、如何定义和触发自定义事件？

✅ 步骤 1：在子组件中定义并触发事件

<!-- ChildComponent.vue -->
<template>
  <button @click="notifyParent">点击通知父组件</button>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    notifyParent() {
      // 触发名为 "child-event" 的自定义事件
      this.$emit('child-event', { message: '来自子组件的消息' });
    }
  }
}
</script>

✅ 步骤 2：在父组件中监听并处理事件

<!-- ParentComponent.vue -->
<template>
  <div>
    <h2>父组件</h2>
    <ChildComponent @child-event="handleChildEvent" />
    <p>接收到的消息：{{ receivedMessage }}</p>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      receivedMessage: ''
    }
  },
  methods: {
    handleChildEvent(payload) {
      console.log('父组件接收到事件', payload);
      this.receivedMessage = payload.message;
    }
  }
}
</script>

在这个例子中，当用户点击子组件按钮时，会触发 child-event 事件，并携带数据传给父组件，父组件通过 @child-event 监听并更新页面状态。

四、Vue 3 Composition API 中的事件写法（<script setup>）

在 Vue 3 的 <script setup> 语法糖中，我们可以使用 defineEmits() 来声明和触发事件。

<!-- ChildComponent.vue -->
<template>
  <button @click="notifyParent">点击通知父组件</button>
</template>

<script setup>
const emit = defineEmits(['child-event'])

function notifyParent() {
  emit('child-event', { message: '来自子组件的消息' })
}
</script>

父组件写法不变，仍通过 @child-event 进行监听。

五、自定义事件的命名建议

六、常见的自定义事件应用场景

七、Vue 2 与 Vue 3 事件机制的区别

📌 迁移建议： 如果你正在从 Vue 2 升级到 Vue 3，请注意使用 defineEmits() 替代 this.$emit()，并保持良好的事件命名习惯。

八、自定义事件的最佳实践

九、结语

感谢您的阅读！如果你有任何疑问或想要分享的经验，请在评论区留言交流！