1.defineEmits用法

基本用法

1.声明事件

在<script setup>中定义组件可触发的事件：

<script setup>
// 声明组件会触发的两个事件：'eventA' 和 'eventB'
const emit = defineEmits(['eventA', 'eventB'])

function triggerEvent() {
  // 触发 'eventA' 事件，并传递数据
  emit('eventA', { data: 123 })
}
</script>

2.父组件监听事件

父组件通过v-on(或@)监听子组件触发的事件

<template>
  <ChildComponent 
    @eventA="handleEventA" 
    @eventB="handleEventB" 
  />
</template>

<script setup>
function handleEventA(payload) {
  console.log('收到 eventA:', payload) // { data: 123 }
}
</script>

 

父组件在定义事件的时候，需要保证@-与子组件声明的事件名字保持一致。

高级用法

1. 带验证的事件

通过 对象语法 验证事件参数：

<script setup>
const emit = defineEmits({
  // 验证函数返回布尔值（true = 验证通过）
  submit: ({ email, password }) => {
    if (email && password) return true
    console.error('参数无效！')
    return false
  }
})

function sendData() {
  emit('submit', { email: 'a@b.com', password: '123' }) // 有效
  // emit('submit', {}) // 控制台警告：参数无效！
}
</script>