在＜script setup＞中使用 defineEmits 触发自定义事件传递数据（子传父）

本文主要是介绍在＜script setup＞中使用 defineEmits 触发自定义事件传递数据（子传父），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在子组件中导入 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 方法将被调用，并接收传递的数据作为参数。你可以根据实际需求对数据进行处理或使用。