本组件
<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 默认对应 modelValue prop 和 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" />
