Vue路由视图传prop至子组件1正常，子组件2为空的原因

问题重现 #

在App.vue中从index.html解析JSON数据赋值给parsedUser，通过<router-view />传递给子组件时，其中一个组件（Component2）接收的user/user2为空字符串，Vue开发者工具已确认此情况且无报错，但该组件能正常接收testProp。另一个子组件则可正常获取user属性。

可能原因 #

最核心的问题是props类型不匹配：

• Component2的props中定义user/user2为String类型，但JSON.parse解析出的parsedData实际是一个对象（而非字符串）。Vue在类型校验不通过时，会将不匹配的值静默转换为空字符串（无报错提示），而testProp本身就是字符串类型，因此能正常传递。
• 另一个子组件可能未严格限制user的类型，或类型定义为Object，所以能正常接收数据。

解决方案 #

方案1：修正Component2的props类型 #

将Component2中user/user2的类型改为Object，或直接移除类型限制：

<script>
export default {
  name: 'MainComp',
  props: {
    user: Object, // 改为对应的数据类型
    user2: Object,
    testProp: String
  },
  // ...其他代码
}
</script>

方案2：将解析后的数据转为字符串 #

如果Component2确实需要字符串格式的数据，在App.vue中把解析后的对象转为JSON字符串：

<script>
export default {
  // ...其他代码
  created() {
    const parsedData = JSON.parse(document.getElementById('username').textContent);
    this.parsedUser = JSON.stringify(parsedData); // 转为字符串格式
    this.parsedUser2 = JSON.stringify(parsedData);
  },
}
</script>

方案3：添加数据加载判断 #

确保数据解析完成后再渲染子组件，避免组件拿到初始的默认占位值：

<template>
  <router-view 
    v-if="parsedUser !== 'User not authenticated'"
    :user="parsedUser" 
    :user2="parsedUser2" 
    :testProp="testProp"
  />
</template>

验证步骤 #

1. 在App.vue的created钩子中添加console.log(typeof parsedData)，确认解析后的数据类型。
2. 对比另一个正常接收数据的子组件的props定义，查看类型差异。

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