Vue动态组件v-model绑定联合类型的TypeScript错误修复

问题根源 #

动态切换Test1/Test2组件时，v-model绑定的apiRes是Car|Car2联合类型，但两个组件各自的modelValue只接受单一类型（Test1要Car，Test2要Car2），TypeScript无法在编译期确定当前组件对应的类型，因此抛出类型不匹配错误。临时的类型断言虽然能消除报错，但如果组件切换时数据类型未同步，会引发运行时风险。

正确修复方法 #

方法一：类型守卫+条件渲染（最安全） #

通过类型守卫明确apiRes的类型，结合条件渲染确保组件与数据类型严格匹配，完全避免类型断言的风险。

类型定义与组件示例

// types.ts
export interface Car {
  brand: string;
  type: 'car';
}

export interface Car2 {
  model: string;
  type: 'car2';
}

export type ApiRes = Car | Car2;

<!-- Test1.vue -->
<script setup lang="ts">
import type { Car } from './types';
defineProps<{ modelValue: Car }>();
defineEmits<{ 'update:modelValue': [value: Car] }>();
</script>

<!-- Test2.vue -->
<script setup lang="ts">
import type { Car2 } from './types';
defineProps<{ modelValue: Car2 }>();
defineEmits<{ 'update:modelValue': [value: Car2] }>();
</script>

父组件实现

<script setup lang="ts">
import Test1 from './Test1.vue';
import Test2 from './Test2.vue';
import { ref } from 'vue';
import type { ApiRes, Car, Car2 } from './types';

const currentComp = ref<'test1' | 'test2'>('test1');
const apiRes = ref<ApiRes>({ brand: 'BMW', type: 'car' });

// 类型守卫：判断是否为Car类型
const isCar = (res: ApiRes): res is Car => res.type === 'car';
// 类型守卫：判断是否为Car2类型
const isCar2 = (res: ApiRes): res is Car2 => res.type === 'car2';

// 切换组件时同步数据类型
const switchComp = () => {
  currentComp.value = currentComp.value === 'test1' ? 'test2' : 'test1';
  // 根据目标组件重置数据
  apiRes.value = currentComp.value === 'test1' 
    ? { brand: 'Audi', type: 'car' } 
    : { model: 'Model 3', type: 'car2' };
};
</script>

<template>
  <button @click="switchComp">切换组件</button>
  <Test1 v-if="currentComp === 'test1' && isCar(apiRes)" v-model="apiRes" />
  <Test2 v-else-if="currentComp === 'test2' && isCar2(apiRes)" v-model="apiRes" />
</template>

方法二：动态组件+精准类型断言（需保证类型同步） #

如果坚持使用<component>标签，可根据当前组件类型做精准断言，但必须确保切换组件时apiRes的类型同步更新，避免运行时错误。

<script setup lang="ts">
import Test1 from './Test1.vue';
import Test2 from './Test2.vue';
import { ref } from 'vue';
import type { ApiRes, Car, Car2 } from './types';

const currentComp = ref<typeof Test1 | typeof Test2>(Test1);
const apiRes = ref<ApiRes>({ brand: 'BMW', type: 'car' });

const switchComp = () => {
  if (currentComp.value === Test1) {
    currentComp.value = Test2;
    apiRes.value = { model: 'Model Y', type: 'car2' };
  } else {
    currentComp.value = Test1;
    apiRes.value = { brand: 'Mercedes', type: 'car' };
  }
};
</script>

<template>
  <button @click="switchComp">切换组件</button>
  <component 
    :is="currentComp" 
    v-model="currentComp === Test1 ? (apiRes as Car) : (apiRes as Car2)" 
  />
</template>

方法三：重构组件props支持联合类型（业务允许时） #

如果业务场景允许，让两个组件的modelValue都接受ApiRes联合类型，组件内部通过类型守卫处理不同类型的逻辑。

<!-- Test1.vue -->
<script setup lang="ts">
import type { ApiRes, Car } from './types';
defineProps<{ modelValue: ApiRes }>();
defineEmits<{ 'update:modelValue': [value: ApiRes] }>();

// 组件内部使用时做类型判断
const handleSubmit = () => {
  if ((props.modelValue as Car).type === 'car') {
    // 处理Car类型逻辑
  }
};
</script>

此时父组件直接绑定即可，无需额外处理：

<component :is="currentComp" v-model="apiRes" />

临时类型断言的风险 #

直接使用apiRes as Car或apiRes as Car2的问题在于：如果切换组件时未同步apiRes的类型，比如当前渲染Test2但apiRes还是Car类型，组件内部访问model属性时会出现运行时错误（Car没有model字段）。

内容的提问来源于stack exchange，提问作者Ned Lin