Vue传递字符串类型prop触发类型告警，是否和onMounted数据加载逻辑有关？

开发者阿泽

2026-9-25

问题解答

告警原因

该告警确实和你的数据加载方式直接相关。
Vue组件的生命周期执行顺序为：父组件setup初始化 → 父组件模板解析、渲染子组件 → 父组件onMounted钩子触发。你将异步数据请求放在onMounted中执行，意味着第一次渲染子组件时，异步请求还未返回结果，你的left变量没有初始化赋值，此时left.leftA的值为undefined，和子组件props声明的String类型不匹配，因此触发类型校验警告。等异步请求完成给left赋值后，子组件会接收到正确的字符串值，页面渲染会恢复正常，但第一次渲染的警告已经抛出。

onMounted加载数据的合理性

使用onMounted加载数据的写法本身是合理的，属于非常常见的「组件挂载后拉取业务数据」的实现方式，只是你没有处理好异步数据返回前的初始状态问题。

修复方案

方案1：给left设置符合预期的初始值
在setup中声明left的时候直接初始化结构，从根源避免值为undefined的情况：
```
const left = ref({ leftA: '' })
```
初始状态下left.leftA为空字符串，符合子组件的String类型要求，不会触发警告。
方案2：给子组件props添加默认值
修改子组件的props声明，设置默认兜底值：
```
left: {
  type: String,
  required: true,
  default: ''
}
```
当传入值为undefined时会自动使用默认空字符串，跳过类型报错。
方案3：条件渲染子组件
父组件渲染CustomCard时增加判断，等数据加载完成后再渲染子组件：
```
<CustomCard
  v-if="left?.leftA"
  :left="left.leftA"
/>
```
初始没有数据时不渲染子组件，自然不会触发props校验。