Vue 3 中使用defineEmits

在 Vue 3 中，defineEmits 用于在组件中定义自定义事件，使得子组件可以向父组件发送数据。以下是 defineEmits 的基本用法

• 子组件 ChildComponent.vue

<script setup>
// 定义可以发射的事件
const emits = defineEmits(['complexEvent']);

// 触发事件，向父组件发送数据
const handleEmit = () => {
  emits('complexEvent', '这是子组件发送过来的数据');
};
</script>

• 父组件

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const message = ref('');

const complexEvent = (val) => {
  message.value = val;
};
</script>

<template>
    <div>{{ message }}</div>
    <ChildComponent @complexEvent="complexEvent" />
</template>

ts 中使用

• 子组件

  <ReImageVerify v-model:code="imgCode" />

• 父组件

interface Emits {
  (e: "update:code", code: string): void;
}

const emit = defineEmits<Emits>();

watch(imgCode, newValue => {
  emit("update:code", newValue);
});