与 typescript 通用一起使用时，在 vue3 中抛出道具磨损

Question

我面临这样奇怪的警告。
我定义的非数组类型看起来像发布的示例代码。
但是，Vue3 发出了警告。
有什么解决办法吗？？
或者我错过了一些机会？

简单地说，我定义modelValue类型看起来像T | T[] | undefined T | T[] | undefined
但是，Vue3 检测到Null | Array Null | Array 。
那么，一个T怎么被忽略了？？

我正在使用 Nuxt3、Vue3，组成 api

// types/index.d.ts
type ItemType { [key: string]: any } | string | boolean

// CSelect.vue
<template><div>{{/* contents - It's not a key on this Topic */}}</div></template>
<script setup lang="ts" generic="T extends ItemType">
defineProps<{
  items: T[]
  modelValue: T | T[] | undefined
}>()
</script>

// create.vue - how i used
<template>
  <div class="create">
    <div class="title-area">
      <CForm>
        <InputTemplate>
          {{/* This CSelect components are Throw warnings by v-model */}}
          <CSelect 
            v-model="data.category"
            class="nft-input"
            :items="categoryItems"
          />
        </InputTemplate>
      </CForm>
    </div>
  <div>
</template>
<script setup lang="ts">
const categoryItems = computed(() => ['value1', 'value2', 'value3'])
const data = reactive({ category: String(categoryItems.value[0]) })
</script>

[Vue warn]: Invalid prop: type check failed for prop "modelValue". Expected Null | Array, got String with value "Limited". 
  at <CSelect modelValue="Limited" onUpdate:modelValue=fn class="input"  ... > 
  at <InputTemplate title="Category" > 
  at <CForm modelValue=false onUpdate:modelValue=fn class="inputs-area"  ... > 
  at <Create onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > > 
  at <Anonymous key="/member/99/create" routeProps= {Component: {…}, route: {…}} pageKey="/member/99/create"  ... > 
  at <Anonymous > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <Default > 
  at <Anonymous key="default" name="default" hasTransition=false > 
  at <Anonymous > 
  at <Anonymous> 
  at <App key=1 > 
  at <NuxtRoot>

Answer 1

您的父组件create.vue没有setup和lang="ts" 。 您正在传递给子v-model和class没有:所以它们不是道具，它们是属性。 div元素会有它们，因为他是根元素。

如何使用属性的示例：

<template>
   <div>
      <label :for="label">{{label}}</label>
      <input v-bind="$attrs" :id="label" :value="$attrs.modelValue" @input="$emit('update:modelValue', $event.target.value)">
   </div>
</template>
<script setup>
defineProps(['label'])
defineEmits(['update:modelValue'])
</script>

v-bind将所有属性分配给一个元素。

我没有在组件中使用泛型，所以我可以告诉你停止，用户不关心泛型。 而且您不是经验丰富的程序员，无法为不同的程序员构建 UI 库。