vue3 中，使用typescript时，要怎样去定义自定义事件的回调函数类型。

Question

例如我有两个组件，一个是 Child 组件，会触发一个自定义事件 change, 并且会传递一些数据出去。
另一个是 Parent 组件，会使用 Child 组件，并且监听 Child 组件的 change 事件。

代码如下：

Child.vue

<template>
  <button @click="onClick">emit an event</button>
</template>
<script lang="ts">
  import { defineComponent } from 'vue'
  export default defineComponent({
    emits: ['change'],
    setup(props, {emit}) {
       function onClick () {
         emit('change', 'This is string type payload')
       }
       
       return { onClick }
    }
  })
</script>

Parent.vue

<template>
  <child @change="onChange" />
</template>
<script lang="ts">
  import { defineComponent } from 'vue'
  import Child from './Child.vue'

  export default defineComponent({
    components: {Child},
    setup(props) {
       function onChange (payload: string) {
           console.log(payload)
       }
       
       return { onChange }
    }
  })
</script>

在 Parent 中，其实是感知不到 Child 组件的 change 事件会带上什么类型的参数的，因为在 Child 中根本没有定义 hanlder 的类型。

所以在 Child 中要怎样定义自定义事件的类型呢？

Answer 1

Parent.vue中定义一个method就可以了。

<!-- Parent.vue -->
<template>
  <Child @change="onChange" />
</template>
<script>
import { defineComponent } from "vue";
import Child from "./Child.vue";

export default defineComponent({
  components: { Child },
  methods: {
    onChange(payload) {
      console.log(payload);
    },
  },
});
</script>

在线地址：https://codesandbox.io/s/vue3...

另外，Vue3的setup中是无法使用methods的，因为在执行setup时，组件实例还没有被创建。

Vue3文档说明

访问组件的 property
执行 setup 时，组件实例尚未被创建。因此，你只能访问以下 property：props、attrs、slots、emit
换句话说，你将无法访问以下组件选项：data、computed、methods