Vue 3 中的类型化事件？

Question

目前我正在手动投射一个事件：

const emit = defineEmits<{
  (e: 'update:modelValue', value: string | number): void
}>()

// [..]    

<input
  type="text"
  :value="modelValue"
  @input="emit('update:modelValue', ($event.target as // manually
HTMLInputElement).value)"                             // casted
/>

还有比这更好的方法吗？有什么办法可以强制转换它吗？

提示：我在这里没有使用 v-model，因为显示的代码是组件的一部分（然后将在组件上使用 v-model）

Answer 1

您可以使用函数代替 in-lining 它来制作更好的模板，但它不会改变您必须转换它，如 official docs[=14= 所示]

还想指出这个问题有点误导，因为

const emit = defineEmits<{
  (e: 'update:modelValue', value: string | number): void
}>()

与模板中的@input无关。将它包含在问题中让我一开始认为您期望 defineEmits 会影响它。

Vue 3 中的类型化事件？

Typed events in Vue 3?

typescript

vue.js

vuejs3