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