vue3中子组件向父组件传点击事件时Cannot read properties of undefined (reading 'emits')

在 Vue 3 中，`emits` 属性被用来声明组件可以向父组件发出的事件，如果你在子组件中使用了 `emits`，则需要在父组件中通过 `v-bind` 指令将子组件的事件绑定到父组件的方法上。

如果你遇到了 "Cannot read properties of undefined (reading 'emits')" 的错误，那么可能是因为你忘记在子组件中声明 `emits` 属性了。或者你可能在 Vue 2 中使用了 `$emit` 来触发事件，而在 Vue 3 中需要使用 `emit` 方法。

以下是一个使用 `emits` 属性来向父组件传递点击事件的示例：

<!-- 子组件 -->
<template>
  <button @click="handleClick">点击</button>
</template>

<script>
export default {
  emits: ['click'],
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>

<!-- 父组件 -->
<template>
  <div>
    <child-component @click="handleChildClick" />
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  methods: {
    handleChildClick() {
      console.log('子组件点击了')
    }
  }
}
</script>

在子组件中，我们声明了 `emits` 属性来指定子组件可以向父组件发出 `click` 事件。在 `handleClick` 方法中，我们使用 `this.$emit` 方法来触发 `click` 事件。

在父组件中，我们使用 `v-bind` 指令将子组件的 `click` 事件绑定到 `handleChildClick` 方法上，当子组件被点击时，父组件中的 `handleChildClick` 方法会被调用。