为什么$emit不能在我的vue组件中工作

<!-- 子组件 ChildComponent.vue -->
<template>
  <button @click="sendToParent">Send to Parent</button>
</template>

<script>
export default {
  name: 'ChildComponent',
  methods: {
    sendToParent() {
      // 触发名为 'custom-event' 的事件，并传递数据
      this.$emit('custom-event', 'Hello from child!');
    }
  }
}
</script>

<!-- 父组件 ParentComponent.vue -->
<template>
  <ChildComponent @custom-event="handleCustomEvent" />
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleCustomEvent(data) {
      console.log(data); // 应该输出 'Hello from child!'
    }
  }
}
</script>