如何定义 Vue 3 的 emit

Question

我正在寻找是否可以定义发射类型。在脚本设置中的 SFC 中，我们可以执行 (docs):

<script setup lang="ts">
// runtime
const emit = defineEmits(['change', 'update'])

// type-based
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

因为我正在寻找一种定义相同事物但基于渲染函数的方法：

export const ComponentA = defineComponent({
  props: {...},
  setup() {
    const emit = defineEmits<{
      (e: 'change', id: number): void
      (e: 'update', value: string): void
    }>()
  }
})

不幸的是，我收到以下错误 defineEmits() is a compiler-hint helper that is only usable inside <script setup> of a single file component.。

有没有办法定义触发的事件及其类型？

Answer 1

不，不可能。

你自己说的：

... is compiler-hint helper ... only usable inside of a single file component

Answer 2

您不能从 setup() 中声明发射，但您可以在 setup() 挂钩旁边使用 emits option，并从上下文参数的 [=14= 访问发射] 属性（即通过 setup() 的第二个参数）：

import { defineComponent } from 'vue'

export const ComponentA = defineComponent({
    
  emits: {
    change: (id: number) => true,
    update: (value: string) => true,
  },
  setup(props, { emit }) {
    // @ts-expect-error
    emit('change', 'foo')
    // @ts-expect-error
    emit('update', 100)
    // ok
    emit('change', 100)
    // ok
    emit('update', 'x')
  }
})

demo

如何定义 Vue 3 的 emit

How to define Vue's 3 emit

typescript

vue.js

vuejs3