vue3.2 emit

在 Vue 3.2 及以上的版本中，你可以使用 `emit` 函数来在组件中触发自定义事件。以下是一个示例：

<template>
  <button @click="handleButtonClick">Click me</button>
</template>

<script setup>
import { emit } from 'vue';

function handleButtonClick() {
  // 触发自定义事件，并传递数据
  emit('customEvent', 'Hello from child component');
}
</script>

在这个示例中，我们在模板中绑定了一个点击事件 `@click`，当按钮被点击时，会调用 `handleButtonClick` 函数。

在 `handleButtonClick` 函数中，我们使用 `emit` 函数来触发一个名为 `customEvent` 的自定义事件，并传递了一个字符串作为数据。你可以根据需要传递任意类型的数据。

在父组件中，你可以通过监听这个自定义事件来接收传递的数据。以下是一个父组件的示例：

<template>
  <child-component @customEvent="handleCustomEvent"></child-component>
</template>

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

function handleCustomEvent(data) {
  // 在这里处理接收到的自定义事件数据
  console.log(data); // 输出：'Hello from child component'
}
</script>

在父组件的模板中，我们使用 `@customEvent` 来监听子组件触发的 `customEvent` 自定义事件，并将其绑定到 `handleCustomEvent` 函数上。

当子组件触发 `customEvent` 自定义事件时，父组件中的 `handleCustomEvent` 函数会被调用，并接收传递的数据作为参数。

通过使用 `emit` 函数和自定义事件，你可以在 Vue 3 中实现组件之间的通信和数据传递。