在 Vue 3 中，使用 script setup 语法时，如何把事件从子组件触发到父组件？

在Vue 3中使用<script setup>语法，从子组件向父组件发送事件的一个常见方式是使用defineEmits函数来定义一个发射器（emitter），然后使用这个发射器来触发（emit）事件。以下是具体的步骤和示例：

步骤：

1. 子组件中定义发射器：

   • 使用defineEmits来声明一个发射器，定义可以发射的事件。

2. 子组件中触发事件：

   • 在适当的地方，如方法内或生命周期钩子中，使用发射器触发事件，并可以传递数据给父组件。

3. 父组件中监听这个事件：

   • 在父组件的模板中，使用v-on或其简写符号@来监听子组件发出的事件，并定义对应的处理函数。

示例：

子组件 (ChildComponent.vue)

vue
<script setup>
// 引入defineEmits
import { defineEmits } from 'vue';

// 定义事件，这里定义了一个名为'update'的事件
const emit = defineEmits(['update']);

// 定义一个方法，用来在适当的时候触发事件
const updateParent = (data) => {
    emit('update', data);
};
</script>

<template>
  <button @click="updateParent('Hello from Child')">Update Parent</button>
</template>

父组件 (ParentComponent.vue)

vue
<template>
  <!-- 监听子组件发出的update事件，并定义处理函数handleUpdate -->
  <ChildComponent @update="handleUpdate" />
</template>

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

// 定义方法来处理从子组件接收到的数据
const handleUpdate = (data) => {
    console.log('Received data from child:', data);
};
</script>

在这个例子中，ChildComponent 有一个按钮，当用户点击这个按钮时，它会通过发射器触发一个名为 'update' 的事件，并发送一些数据（在这个例子中是字符串 'Hello from Child'）。ParentComponent 监听这个 update 事件，并在事件触发时执行 handleUpdate 方法，方法中可以接收并处理从子组件发送过来的数据。

这样，你就可以在使用 <script setup> 语法的 Vue 3 组件中，从子组件向父组件发送事件了。