typescript + vue3.0 报错 emit is not a function， 不使用语法糖

### 回答1：
在Vue 3.0中，使用`defineEmits`来定义组件的emits选项，而不是在组件中直接声明`emits`选项。

如果您想手动触发一个事件，可以使用`$emit`方法。例如，如果您有一个名为`myEvent`的事件，您可以在组件方法中使用`this.$emit('myEvent', data)`来手动触发它。

以下是一个示例组件，展示如何在Vue 3.0中使用`defineEmits`和`$emit`：

import { defineComponent } from 'vue';

export default defineComponent({
  emits: ['myEvent'],
  methods: {
    handleClick() {
      // 在此处手动触发myEvent事件
      this.$emit('myEvent', { eventData: 'example data' });
    },
  },
  template: `
    <button @click="handleClick">Click me</button>
  `,
});

请注意，在组件中使用`this.$emit`之前，必须将事件名称添加到`emits`选项中。

### 回答2：
在Vue 3.0版本中，我们经常会遇到一个问题，即在使用TypeScript编写代码时，当我们尝试使用`emit`函数来触发一个事件时，会遇到"emit is not a function"的错误。

出现这个错误的原因是，Vue 3.0中引入了新的组件实例属性`emits`，用于声明组件可以触发的事件。这样做的好处是在运行时可以静态分析事件的触发，提供更好的类型检查和智能提示功能。

然而，在使用该特性时，我们需要遵循一些规则来解决上述报错。首先，需要为组件定义一个`emits`属性，该属性是一个对象，键为事件名称，值为事件的参数类型。

例如：

import { Component, Vue, Emit } from 'vue-property-decorator';

@Component
class MyComponent extends Vue {
  emits = {
    myEvent: (data: string) => true // 定义名为myEvent的事件，参数为字符串类型
  };

  @Emit('myEvent')
  emitMyEvent(data: string) {
    return data;
  }
}

在上述代码中，我们使用了`@Emit`装饰器来简化`emit`函数的使用。在`emitMyEvent`方法中，我们通过`@Emit('myEvent')`装饰器来指定触发`myEvent`事件，并将`data`参数作为事件的参数传递。

如果不使用装饰器语法糖的话，可以手动调用`this.$emit`方法来触发事件：

import { defineComponent } from 'vue';

export default defineComponent({
  emits: ['myEvent'], // 在组件定义中声明可以触发的事件

  methods: {
    emitMyEvent(data: string) {
      this.$emit('myEvent', data); // 使用this.$emit手动触发事件
    }
  }
});

总结来说，在Vue 3.0中解决"emit is not a function"报错，需要使用`emits`属性来声明组件可以触发的事件，并使用`@Emit`装饰器或手动调用`this.$emit`方法来触发事件。这样做既可以提供更好的类型检查和智能提示功能，又可以消除该报错。

### 回答3：
当在使用 TypeScript 和 Vue 3.0 时，如果出现报错 "emit is not a function"，通常是因为未正确绑定 `this` 指向导致的。

在 Vue 3.0 中，`emit` 是通过将事件方法传递给子组件属性 (`v-bind="$emit"`) 实现的，而在 TypeScript 中，需要明确声明子组件的类型和父组件的类型，以便在子组件中使用 `emit`。

首先，确保正确导入 Vue 和相关模块。在组件的导出中，需要使用类型声明来确保正确的使用 `emit`。例如：

import { defineComponent, PropType } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  props: {
    myProp: {
      type: String,
      required: true
    }
  },
  emits: {
    // 声明要使用的事件
    myEvent: (payload: string) => {
      return typeof payload === 'string';
    },
  },
  methods: {
    handleClick() {
      // 触发事件
      this.$emit('myEvent', 'myPayload');
    }
  },
  mounted() {
    // 使用 $emit 触发事件
    this.$emit('myEvent', 'myPayload');
  }
});

在上述代码中，我们首先通过 `import` 导入了 Vue 的相关模块，并使用 `defineComponent` 创建了组件。

然后，在 `props` 中声明了 `myProp` 属性，确保了类型和是否必需。

接下来，在 `emits` 中声明了要使用的事件，并给出了事件的回调函数。在这个例子中，我们声明了 `myEvent` 事件，回调函数接受一个字符串类型的参数，并通过返回值声明了回调函数的有效性。

最后在 `methods` 和 `mounted` 中使用 `this.$emit` 来触发 `myEvent` 事件，并传递了一个字符串参数。

通过以上的步骤，我们可以避免“emit is not a function”的报错，并在 TypeScript 和 Vue 3.0 中正确使用 `emit`。