Vue3+TS父组件向子组件传递props的实现与报错解决

你遇到的TS报错翻译如下：

类型 '{ tabData: IntArgumentListData[]; "tab data": IntArgumentListData[]; }' 无法赋值给类型 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ tabsData: IntArgumentListData[]; }>>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'。
类型"{ tabData: IntArgumentListData[]; "tab-data": IntArgumentListData[]; }"中缺少必填属性tabsData。ts(2322)

报错本质是三个写法问题：

• 父组件传值方式错误：把tabsData写在<ArgumentTabComponent>开闭标签中间属于传入默认插槽内容，不是props传值。props必须通过标签属性+v-bind（:前缀）绑定传入。
• 子组件props定义错误：当前定义的title、content两个属性和父组件要传的tabsData数组完全不匹配，TS检测到子组件要求必填tabsData属性但父组件没传，因此抛出错误。
• 子组件遍历逻辑错误：模板中v-for="tab in props"遍历的是整个props对象，props本身不是可遍历的数组，无法渲染出TabPanel列表。

父组件（视图页面） #

仅需修改模板中子组件的调用方式，将插槽传值改为props绑定：

<script setup lang="ts">
import ArgumentTabComponent from "./components/ArgumentTabComponent.vue";
import $t from "@/core/utils/i18n/translate";
import Button from "primevue/button";
import type { IntArgumentListData } from "./types/IntArgumentListData";

const tabsData: IntArgumentListData[] = [
  { title: "Argumento 1", content: "texto1" },
  { title: "Argumento 2", content: "texto2" },
  { title: "Argumento 3", content: "texto3" },
  { title: "Argumento 4", content: "texto4" },
  { title: "Argumento 5", content: "texto5" },
];

const handleRedirect = () => {
  alert("Aceptando!");
};
</script>

<template>
  <br />
  <h1>Argumentarios</h1>
  <div>
    <!-- 核心修改：通过:tabsData绑定传入数组，移除标签中间的{{tabsData}} -->
    <ArgumentTabComponent :tabsData="tabsData" />
    <hr />
    <Button :label="$t('common.accept')" @click="handleRedirect" />
  </div>
</template>

子组件（ArgumentTabComponent.vue） #

修改defineProps的类型定义，同时修正模板遍历目标：

<script setup lang="ts">
import TabView from "primevue/tabview";
import TabPanel from "primevue/tabpanel";
import type { IntArgumentListData } from "../types/IntArgumentListData";

// 核心修改：定义接收名为tabsData的数组属性，类型与父组件传入值匹配
const props = defineProps<{
  tabsData: IntArgumentListData[];
}>();
</script>

<template>
  <br />
  <div>
    <TabView>
      <!-- 核心修改：遍历props.tabsData数组，而非整个props对象 -->
      <TabPanel v-for="tab in props.tabsData" :key="tab.title" :header="tab.title">
        <p>{{ tab.content }}</p>
      </TabPanel>
    </TabView>
  </div>
  <br />
</template>

• Vue 3.3及以上版本支持在<script setup>模板中直接使用props名（即直接写tabsData代替props.tabsData），属于官方语法糖，不会有TS类型问题。
• <script setup>语法下defineProps是编译宏，无需额外导入，直接通过泛型定义TS类型即可，不需要套用选项式API的export default {}写法。

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