Vue3 setup模式下，子组件Props接收父组件Ref数组的TS类型标注问题

问题原因 #

1. 子组件未定义Book接口：子组件props中使用的Book类型未在当前作用域声明，TypeScript无法识别该类型；同时父组件的Book接口仅在自身作用域有效，与子组件中未定义的Book不属于同一类型，导致类型不匹配报错。
2. 模板值绑定错误：子组件模板里的<option value=null>会将字符串"null"作为值传递，而非JS原生null，需改为动态绑定语法。

解决步骤 #

1. 抽离公共Book类型（推荐） #

创建公共类型文件（如src/types/book.ts），统一管理Book接口，避免重复定义导致的类型不一致：

export interface Book {
  title: string
  description: string
}

2. 父组件修改：导入公共类型 #

<template>
  <CustomSelect :bookOptions="bookList" />
  ...
</template>

<script setup lang="ts">
import { ref } from 'vue';
// 导入公共Book类型
import type { Book } from './types/book';

let bookList = ref<Book[]>([]);
</script>

3. 子组件修改：导入公共类型并修正模板绑定 #

<template>
  <select v-model="selectedBook" @click="print">
    <!-- 修正null的绑定方式，使用动态绑定传递原生null -->
    <option :value="null">----</option>
    <option v-for="book in props.bookOptions" :key="book.title" :value="book">
      {{ book.title }}
    </option>
  </select>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// 导入公共Book类型
import type { Book } from './types/book';

const props = defineProps<{
  bookOptions?: Book[];
}>();
const selectedBook = ref<Book | null>(null);

function print() {
  console.log(selectedBook.value);
}
</script>

替代方案：子组件内声明一致的Book接口 #

若不想抽离公共类型，可在子组件内直接声明与父组件结构完全一致的Book接口：

<script setup lang="ts">
import { ref } from 'vue';

// 声明与父组件结构完全一致的Book接口
interface Book {
  title: string
  description: string
}

const props = defineProps<{
  bookOptions?: Book[];
}>();
const selectedBook = ref<Book | null>(null);

function print() {
  console.log(selectedBook.value);
}
</script>

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