v-on怎么监听defineEmits()组件定义自定义事件

要监听`defineEmits()`定义的组件自定义事件，你可以像监听普通事件一样使用`v-on`指令来监听自定义事件。只需将自定义事件名称作为事件名称传递给`v-on`指令即可。

例如，假设我们在组件中使用`defineEmits()`定义了一个名为`custom-event`的自定义事件，我们可以在父组件中使用`v-on`指令来监听该事件，如下所示：

<my-component v-on:custom-event="handleCustomEvent"></my-component>

在这个示例中，我们在`my-component`组件上使用`v-on`指令来监听`custom-event`自定义事件，并在事件被触发时调用名为`handleCustomEvent`的Vue方法。

注意，在使用`defineEmits()`定义自定义事件时，Vue 3会使用类型检查来确保我们只能触发已定义的自定义事件，并且只能传递已定义的事件参数。如果我们尝试触发未定义的自定义事件或传递未定义的事件参数，Vue将会抛出一个警告。

相关问题

defineEmits()如何自定义事件

要自定义事件，我们可以在调用`defineEmits()`函数时传递一个字符串数组，该数组包含组件中可用的自定义事件名称。例如，我们可以像下面这样定义一个名为`custom-event`的自定义事件：

import { defineEmits } from 'vue'

export default {
  emits: defineEmits(['custom-event']),
  // ...
}

在这个示例中，我们在`emits`选项中使用`defineEmits()`函数来定义一个名为`custom-event`的自定义事件。在`my-component`组件中，我们可以使用`$emit()`方法来触发这个自定义事件：

this.$emit('custom-event', payload)

在这个示例中，我们使用`$emit()`方法来触发名为`custom-event`的自定义事件，并将`payload`作为事件参数传递给该事件。当该事件被触发时，父组件可以使用`v-on`指令来监听该事件并执行相应的操作。

vue3 自定义组件v-model

在Vue 3中，自定义组件的v-model默认绑定的是`modelValue`而不是`value`，接收的方法由`input`改为`@update:modelValue`。例如，在一个父组件中，我们可以这样使用自定义组件：

<template>
  <child v-model="message" />
</template>

然后在子组件中，我们可以这样定义props和setup函数：

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  modelValue: String
})

const emits = defineEmits(['update:modelValue'])

const onInput = (e) => {
  emits['update:modelValue'](e.target.value)
}

</script>
<template>
  <input type="text" :value="modelValue" @input="onInput">
</template>

通过这种方式，我们可以像使用原生的`v-model`一样在父组件中使用自定义组件，并且可以正确地双向绑定`modelValue`的值。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [vue3 自定义组件v-model](https://blog.csdn.net/weixin_46694059/article/details/128935137)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue3中自定义组件使用v-model](https://blog.csdn.net/qq_42075072/article/details/123800801)[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^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]