在子组件中导入 defineEmits：在 <script setup> 的顶部，你需要导入 defineEmits 函数。

import { defineEmits } from 'vue';

定义自定义事件：使用 defineEmits 函数定义你想要触发的自定义事件。你可以传递一个事件名称的数组作为参数。

const emit = defineEmits(['custom-event']);

触发自定义事件并传递数据：在组件的方法中，你可以使用 emit 函数来触发自定义事件，并传递所需的数据。数据可以是任何类型，例如字符串、对象或数组。

const handleClick = () => {  emit('custom-event', { message: 'Hello from child component!' });  
};

在模板中使用事件：在模板中，你可以使用 @ 符号监听自定义事件，并指定一个处理程序来处理事件触发时的情况。处理程序可以接收传递的数据作为参数。

<template>  <button @click="handleClick">触发自定义事件</button>  
</template>

在父组件的模板中，使用 @ 符号来监听子组件触发的自定义事件，并在事件处理程序中接收传递的数据。

父组件模板：

<template>  <ChildComponent @custom-event="handleCustomEvent" />  
</template>

父组件：

import ChildComponent from './ChildComponent.vue';  export default {  components: {  ChildComponent  },  methods: {  handleCustomEvent(data) {  // 在这里接收子组件传递的数据  console.log(data); // 输出传递的数据  }  }  
};

在上述示例中，父组件通过 @custom-event 监听子组件触发的 custom-event 事件。当事件触发时，父组件的 handleCustomEvent 方法将被调用，并接收传递的数据作为参数。你可以根据实际需求对数据进行处理或使用。