VUE3：深入浅出自定义事件

什么是自定义事件？

自定义事件是子组件向父组件"发信号"。比如子组件的按钮被点击了，需要通知父组件执行某些操作。也就是Vue中子组件向父组件通信的机制。子组件通过defineEmits声明事件（数组或对象形式），在特定操作时用emit()触发事件并传递数据。父组件通过@事件名监听这些事件，接收子组件传递的参数并执行相应操作。

以下示例展示了子组件触发click、submit、delete三种事件，父组件接收并处理这些事件及附带的数据，实现组件间的交互通信。

基本使用

子组件（发送事件）

<template> <div class="child"> <h3> 子组件 - 自定义事件示例</h3> <!-- 点击按钮时发送不同的事件 --> <button @click="handleClick">发送点击事件</button> <button @click="handleSubmit">提交表单</button> <button @click="handleDelete">删除操作</button> </div> </template> <script setup> // ======================================== // 第一步：使用 defineEmits 声明事件 // ======================================== // 方式1：数组形式（简单） const emit = defineEmits(['click', 'submit', 'delete']) // 方式2：对象形式（可以做参数验证） // const emit = defineEmits({ // click: null, // 不需要验证 // submit: (payload) => { // // 验证函数，返回 true 表示验证通过 // if (payload.username && payload.password) { // return true // } // console.warn('提交数据不完整') // return false // }, // delete: (id) => typeof id === 'number' // }) // ======================================== // 第二步：在需要的时候发送事件 // ======================================== const handleClick = () => { // emit(事件名) emit('click') console.log('已发送 click 事件') } const handleSubmit = () => { // emit(事件名, 参数) - 可以传递数据给父组件 emit('submit', { username: '张三', password: '123456', timestamp: Date.now() }) } const handleDelete = () => { // 可以传递多个参数 emit('delete', 1001, '确认删除') } </script>

父组件（监听事件）

<template> <div class="parent"> <h2> 父组件 - 监听子组件事件</h2> <!-- 使用 @事件名 监听子组件的自定义事件 事件名使用 kebab-case（短横线）命名 --> <ChildEvents @click="onChildClick" @submit="onChildSubmit" @delete="onChildDelete" /> <!-- 显示接收到的数据 --> <div class="log"> <p>点击次数: {{ clickCount }}</p> <p>最近提交: {{ lastSubmit }}</p> <p>删除记录: {{ deleteLog }}</p> </div> </div> </template> <script setup> import { ref } from 'vue' import ChildEvents from './ChildEvents.vue' const clickCount = ref(0) const lastSubmit = ref(null) const deleteLog = ref('') // 处理点击事件 const onChildClick = () => { clickCount.value++ console.log('父组件收到了点击事件') } // 处理提交事件（接收子组件传递的数据） const onChildSubmit = (formData) => { lastSubmit.value = formData console.log('父组件收到表单数据:', formData) } // 处理删除事件（接收多个参数） const onChildDelete = (id, message) => { deleteLog.value = `删除ID: ${id}, 消息: ${message}` console.log('父组件收到删除请求:', id, message) } </script>