父子组件数据共享问题：子组件无法显示父组件count属性

嘿，我来帮你搞定父组件到子组件传count却展示不出来的问题！这种场景我踩过好多次坑，大概率是传参或接收环节的小疏漏，咱们分主流框架一步步排查解决：

不管是Vue 2还是Vue 3，核心逻辑都是父组件通过props传递，子组件声明接收后使用，常见问题点如下：

1. 父组件是否正确绑定属性？ #

别漏了v-bind（简写:）！如果直接写count="count"，传递的是字符串"count"而非父组件的count变量：

<!-- 正确写法 -->
<ChildComponent :count="count" />

<!-- 错误写法（传递的是字符串） -->
<ChildComponent count="count" />

2. 子组件是否声明接收props？ #

子组件必须明确声明要接收的count属性，否则无法在视图中使用：

Vue 2 选项式API #

<template>
  <div>父组件传来的count：{{ count }}</div>
</template>

<script>
export default {
  // 基础写法
  props: ['count'],
  // 更严谨的类型校验写法（推荐）
  // props: {
  //   count: {
  //     type: Number,
  //     required: true,
  //     default: 0 // 可选：给个默认值避免初始为空
  //   }
  // }
}
</script>

Vue 3 组合式API（<script setup>） #

用defineProps声明接收：

<template>
  <div>父组件传来的count：{{ count }}</div>
</template>

<script setup>
// 基础写法
const props = defineProps(['count'])
// 或者带类型校验
// const props = defineProps({
//   count: {
//     type: Number,
//     default: 0
//   }
// })
// 模板里可以直接用count，或者用props.count
</script>

React中父组件通过props传递数据，子组件接收后渲染，重点检查这两步：

1. 父组件传递props #

直接在子组件标签上绑定属性即可：

import ChildComponent from './ChildComponent';

function ParentComponent() {
  const count = 10;
  return (
    <div>
      <ChildComponent count={count} />
    </div>
  );
}

export default ParentComponent;

2. 子组件接收并使用props #

函数组件可以直接通过参数接收，或者解构赋值：

// 写法1：直接接收props对象
function ChildComponent(props) {
  return <div>父组件传来的count：{props.count}</div>;
}

// 写法2：解构赋值（更简洁）
function ChildComponent({ count }) {
  return <div>父组件传来的count：{count}</div>;
}

export default ChildComponent;

• 异步数据问题：如果父组件的count是异步获取的（比如接口请求），初始值可能是undefined，可以给子组件加默认值避免空白
• 类型不匹配：比如父组件的count是字符串类型（比如从URL参数获取），子组件期望数字，虽然不影响展示，但做计算时会出问题，记得转换类型
• 拼写错误：检查父组件传递的属性名和子组件接收的props名是否完全一致（比如父组件写Count，子组件写count，大小写敏感！）

如果按照上面的步骤排查后还是没解决，把你的父/子组件代码贴出来，咱们再具体分析~

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