vue3 子组件中this.$emit报错 TypeError: Cannot read properties of undefined (reading '$emit')

在 Vue3 中，子组件中使用 `this.$emit` 发送事件时，需要使用新的写法，即使用 `emits` 静态属性声明子组件可以发送哪些事件，然后在子组件中使用 `emit` 方法发送事件。具体操作如下：

1. 在子组件的选项对象中添加 `emits` 静态属性，声明子组件可以发送哪些事件。

export default {
  emits: ['eventName'],
  // ... 其他选项
}

2. 在子组件中使用 `emit` 方法发送事件。

this.emit('eventName', eventData);

这样就可以解决 `$emit` 报错的问题。需要注意的是，Vue3 中不再支持 `$listeners` 和 `$attrs` 属性，需要使用 `v-bind` 和 `v-on` 分别绑定属性和事件。

相关问题

vue.runtime.esm.js:1888 TypeError: Cannot read properties of undefined (reading '$emit')

这个错误通常是因为在组件中使用了 $emit，但是该组件没有正确地引入 Vue。请确保在组件中正确引入 Vue，例如：

import Vue from 'vue'

export default {
  methods: {
    handleClick() {
      this.$emit('my-event')
    }
  }
}

如果你已经正确引入了 Vue，但是仍然遇到这个错误，请检查你的代码是否存在其他问题，例如组件的命名是否正确、是否正确绑定了事件等等。

TypeError: Cannot read properties of undefined reading '$emit

错误信息 "TypeError: Cannot read properties of undefined reading '$emit'" 是 Vue.js 中常见的一个类型错误。当你尝试在一个未定义或null的对象上调用 `$emit` 方法时，就会抛出这个异常。

`$emit` 是 Vue 实例的一个方法，用于触发自定义事件（Vue组件之间的通信）。在这个错误中，可能是以下几个情况导致的：

1. **变量未初始化**: 可能你在试图从一个没有被正确初始化或者还没有赋值给 `$emit` 的属性上触发事件。确保在使用之前已经正确地设置了组件实例的 `this.$emit()`。

2. **对象不存在**: 如果在某个生命周期钩子或方法中，该组件实例尚未创建或者已被销毁，那么调用其 `$emit` 就会找不到目标。

3. **拼写或语法错误**: 确保你提供的事件名称是正确的，并且没有遗漏括号或引号。

4. **动态绑定**: 当你在动态生成的元素上使用 `$emit` 时，可能因为数据更新延迟而引发这个问题。确保数据和模板之间关联正确，更新及时。

为了解决此问题，你需要检查代码中的相应位置，找出问题所在，然后修复它。通常这涉及到检查相关的变量、条件语句以及是否在正确的时间点使用了 `$emit`。如果是在动态绑定的情况下，确保已正确处理异步更新。