1. 子组件触发父组件事件

子组件代码 ：

// ChildComponent.vue
<template>
  <button @click="emitEvent">Click me</button>
</template>

<script setup>
import { ref } from 'vue';

const emitEvent = () => {
  emit('childEvent');
};

const emit = defineEmits(['childEvent']);
</script>

父组件代码：

// ParentComponent.vue
<template>
  <ChildComponent @childEvent="handleEvent" />
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

const handleEvent = () => {
  console.log('Child event triggered');
};
</script>