Vue/Nuxt 3 仅使用命名 v-models 时出现类型错误

Question

我有一个 Vue、Nuxt 3 Typescript 项目。

在我的自定义组件中，我使用 named v-models 绑定两个值。它有效，但在父组件中我看到类型错误。

当我在自定义组件中与命名组件一起使用

modelValue

时，错误就会消失，但我不希望这样，我只想要命名 v 模型。

1. 自定义组件

<script setup lang="ts">
const props = defineProps<{
  min: number;
  max: number;
}>();

defineEmits(["update:min", "update:max"]);
</script>

<template>
  <UFormGroup label="Min">
    <UInput
      :value="props.min"
      @input="$emit('update:min', $event.target.value)"
      type="number"
      placeholder="Min"
    />
  </UFormGroup>
  <UFormGroup label="Max">
    <UInput
      :value="props.max"
      @input="$emit('update:max', $event.target.value)"
      type="number"
      placeholder="Max"
    />
  </UFormGroup>
</template>

2. 父组件存在类型错误

<ChangeTypesRandomValue
       v-model:min="item.min"
       v-model:max="item.max"
/>

错误截图：

Argument of type '{ min: any; max: any; }' is not assignable to parameter of type 'Partial<{}> & Omit<{ readonly modelValue: any; "onUpdate:modelValue"?: ((value: any) => any) | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...> & { ...; }, never> & Record<...>'.
  Property 'modelValue' is missing in type '{ min: any; max: any; }' but required in type 'Omit<{ readonly modelValue: any; "onUpdate:modelValue"?: ((value: any) => any) | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps & Readonly<...> & { ...; }, never>'

貌似需要modelValue？不应该的。 Vue Docs 说只要命名 v-models 就可以了。我在这里缺少什么？

编辑： 我从评论中了解到这是我的环境中的 TypeScript 问题。但是，我使用 Nuxt 的默认配置：

tsconfig.json

{
  // https://nuxt.com/docs/guide/concepts/typescript
  "extends": "./.nuxt/tsconfig.json",
}

在不篡改其他任何内容的情况下，我认为类型应该允许省略默认的 v-model

modelValue

props & 发出并仅保留命名的绑定。

Answer 1

不要在模板中使用“props”

使用 ：值=“最小值” ：值=“最大”

而不是 :value="props.min" :value="props.max"

<template>
  <UFormGroup label="Min">
    <UInput
      :value="min"
      @input="$emit('update:min', $event.target.value)"
      type="number"
      placeholder="Min"
    />
  </UFormGroup>
  <UFormGroup label="Max">
    <UInput
      :value="max"
      @input="$emit('update:max', $event.target.value)"
      type="number"
      placeholder="Max"
    />
  </UFormGroup>
</template>