vue3中defineEmits的使用说明

一、基本用法

1. 声明事件
   使用 defineEmits 定义组件可触发的事件，返回一个 emit 函数用于触发事件：

   vue

   <script setup>
   const emit = defineEmits(['submit', 'update:value'])
   </script>

const emit = defineEmits(["update:modelValue"]);

1. 触发事件
   在需要的地方调用 emit(eventName, ...args)：

   javascript

   function handleSubmit() {emit('submit', { data: 'example' })
   }

---

二、类型检查（TypeScript）

通过泛型参数定义事件签名，增强类型安全：

vue

<script setup lang="ts">
const emit = defineEmits<{(e: 'submit', payload: { data: string }): void(e: 'update:value', id: number): void
}>()
</script>

或使用更简洁的语法（Vue 3.3+）：

typescript

defineEmits<{submit: [payload: { data: string }]'update:value': [id: number]
}>()

const emit = defineEmits<{"update:modelValue": [value: ApplyBasicInfo];
}>();

---

三、示例场景

1. 表单提交

vue

<script setup>
const emit = defineEmits(['submit'])function onSubmit() {emit('submit', { username: 'user', password: 'pass' })
}
</script><template><form @submit.prevent="onSubmit"><!-- 表单内容 --></form>
</template>

2. 更新父组件状态

vue

<script setup>
const emit = defineEmits(['update:count'])function increment() {emit('update:count', 10) // 通知父组件更新 count
}
</script>

---

四、注意事项

1. 命名规范
   建议使用 kebab-case（如 update:value），因 HTML 属性不区分大小写。

2. 验证事件参数
   可在 defineEmits 中定义类型（TypeScript）或在 Options API 的 emits 选项添加验证函数：

   javascript

   // Options API 验证
   emits: {submit: (payload) => !!payload.data
   }

3. 与 Options API 对比

   • <script setup> 中用 defineEmits 替代 emits 选项。

   • 类型推断更直观，适合 TypeScript。

4. 无 <script setup> 时的用法
   需改用 Options API 的 emits 选项：

   javascript

   export default {emits: ['submit'],setup(props, { emit }) {// 使用 emit('submit')}
   }

---

五、总结

• defineEmits 用于在组合式 API 中声明组件事件。

• 通过类型泛型（TS）或数组（JS）定义事件列表。

• 触发事件：emit('event-name', payload)

• 优势：明确的类型检查和更好的代码可维护性。