vue3 emits

在Vue3中，emits是一个新增的选项，用于在子组件中接收父组件绑定的方法。通过在子组件中定义emits选项，可以明确指定子组件可以触发的事件。父组件可以通过在子组件上使用v-on指令来监听这些事件。

在Vue2中，我们可以通过在子组件中使用$emit方法来触发父组件中绑定在子组件上的事件。但是在Vue3中，使用emits选项可以更加清晰地定义子组件可以触发的事件，使得代码更易于维护。

举个例子，假设在父组件中有一个计数器变量count，我们希望在子组件中点击按钮时将count加1。在Vue3中，我们可以在子组件中定义emits选项，指定子组件可以触发的事件为add。然后在子组件的模板中，通过调用父组件传递的add方法来触发这个事件。父组件可以通过在子组件上使用v-on指令来监听这个事件，并在事件处理函数中更新count的值。

具体代码如下所示：

在Parent.vue中监听：

<script setup>
import { ref } from 'vue'
const count = ref(0)

const add = (i) => count.value += i
</script>

<template>
  <ChildComponent @add="add" />
  <p>Count: {{ count }}</p>
</template>

在ChildComponent.vue中定义emits选项：

<script>
emits: \['add'\]
</script>

<template>
  <button @click="$emit('add', 1)">Add</button>
</template>

这样，当在子组件中点击按钮时，就会触发父组件中绑定的add方法，从而更新count的值。
#### 引用[.reference_title]
- *1* *3* [Vue3 $emit指南--包含选项API、组合API以及 setup 语法糖](https://blog.csdn.net/qq449245884/article/details/125776563)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [Vue3-新增选项-emits](https://blog.csdn.net/qq_41872385/article/details/123502390)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]