vue3 子组件自定义事件
子组件
<template>
<button @click="handleClick">Click Me</button>
</template>
<script lang="ts" setup>
import { defineEmits } from 'vue';
// 定义 emit 并指定事件类型
const emit = defineEmits(['customEvent']);
const handleClick = () => {
// 触发自定义事件并传递数据
emit('customEvent', 'some data');
};
</script>
父组件
<template>
<div>
<MyButton @customEvent="handleCustomEvent" />
</div>
</template>
<script lang="ts" setup>
import MyButton from './MyButton.vue';
const handleCustomEvent = (data: string) => {
console.log('Event received:', data);
};
</script>