$emit自定义组件发数据本组件

本组件

<template> <view> <zj-a @add='ona'></zj-a> </view> </template> <script setup> const ona=function(e){ console.log(e); } </script> <style lang="scss" > </style>

自定义组件

<template> <view> <button @click="$emit('add',Math.random())"> 按钮 </button> </view> </template> <script setup> </script> <style lang="scss" scoped> </style>

----------------------$emit自定义组件发数据本组件---------------------

$emit 的基本用法

在 Vue 3 中，$emit用于子组件向父组件传递事件。子组件通过触发事件，父组件监听这些事件并执行相应的逻辑。

子组件中触发事件：

this.$emit('event-name', payload);

父组件中监听事件：

<child-component @event-name="handleEvent" />

使用defineEmits声明事件

Vue 3 的<script setup>语法中，推荐使用defineEmits来声明组件可以触发的事件，增强代码的可读性和类型安全。

<script setup> const emit = defineEmits(['event-name']); function triggerEvent() { emit('event-name', payload); } </script>

类型安全的defineEmits

在 TypeScript 中，可以通过泛型为defineEmits提供更严格的类型检查：

<script setup lang="ts"> const emit = defineEmits<{ (e: 'event-name', payload: PayloadType): void; }>(); function triggerEvent() { emit('event-name', payload); } </script>

事件校验

defineEmits还支持对事件参数进行校验，确保触发事件时传递的数据符合预期：

<script setup> const emit = defineEmits({ 'event-name': (payload) => { return typeof payload === 'string' && payload.length > 0; } }); function triggerEvent() { emit('event-name', 'valid payload'); } </script>

动态事件名

可以通过变量动态生成事件名，但需确保事件名在模板中是静态的：

const eventName = 'dynamic-event'; emit(eventName, payload);

与v-model结合使用

$emit常用于实现自定义组件的v-model。在 Vue 3 中，v-model默认对应modelValueprop 和update:modelValue事件：

子组件：

<script setup> const emit = defineEmits(['update:modelValue']); function updateValue(value) { emit('update:modelValue', value); } </script>

父组件：

<custom-component v-model="value" />

多个v-model绑定

Vue 3 支持多个v-model绑定，每个绑定对应不同的事件名：

子组件：

<script setup> const emit = defineEmits(['update:modelValue', 'update:anotherValue']); function updateValues() { emit('update:modelValue', newValue); emit('update:anotherValue', anotherNewValue); } </script>

父组件：

<custom-component v-model="value" v-model:anotherValue="anotherValue" />