如何在 vue-next 中使用带有 typescript 的自定义事件

时间:2021-06-18 12:16:28

标签: javascript typescript vue.js

我有一个 Child 组件发出一个自定义事件 change,并在 Parent 组件上监听这个事件。

代码如下

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>
  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>

当我在 Child 中使用 Parent 组件时,没有对 change 事件处理程序进行类型检查。

那么如何在 Child 组件中定义自定义事件类型。

0 个答案:

没有答案