Vue $emit 和 $event 上的 Vue 3 Typescript 警告“对象可能为 'null'”

Question

如何去掉Vue模板中的TS警告？

我正在使用Vue 3 手册中提供的示例

<input 
   type="text"
   :value="title"
   @input="$emit('update:title', $event.target.value)"
>

注意：这只是一个 TS 警告，它应该正常工作。

Answer 1

我在Mic Fung的帮助下解决了这个问题。创建一个处理程序方法...

import { defineEmits } from 'vue'
const emit = defineEmits(['update:value'])

const updateValue = (e: Event) => {
  emit('update:title', (e.target as HTMLInputElement).value)
};

<input
  :value="value"
  type="text"
  @input="updateValue"
/>

我对问题根源的选择：https ://github.com/vuejs/jsx-next/issues/234