使用v-bind（或简写:）绑定响应式变量是子组件接收实时更新数据的关键，不加则传入静态字符串；需配合子组件props声明且仅响应式数据才具备更新能力。

在父组件模板中，用 v-bind（简写为 :）绑定响应式变量，是让子组件接收到实时、可更新数据的关键操作。不加 v-bind 会被当作静态字符串，导致类型错误或数据失活。

必须用 v-bind 触发动态求值

Vue 模板里所有 prop 值默认是字符串字面量。只有显式使用 v-bind，Vue 才会把右侧表达式当 JavaScript 代码执行，取到真正的响应式值：

• ❌ 错误写法（传的是字符串 "userInfo"）：<usercard userinfo="userInfo"></usercard>
• ✅ 正确写法（传的是 userInfo 变量的响应式对象）：<usercard :userinfo="userInfo"></usercard>
• 等价于完整写法：<usercard v-bind:userinfo="userInfo"></usercard>

支持多种响应式来源

只要右侧是 Vue 的响应式数据，:propName 就能正确传递并保持更新：

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

• ref 或 reactive 定义的数据：:user="userRef"、:config="reactiveConfig"
• 计算属性返回值：:title="computedTitle"
• 方法调用（建议简单逻辑）：:label="getLabel(type)"
• 三元表达式：:disabled="isEditing ? false : true"

配合子组件 props 声明才生效

父组件绑定了，子组件也得“认领”这个 prop，否则值不会进入组件内部：

• 选项式 API：props: ['userInfo', 'title'] 或 props: { userInfo: Object, title: String }
• 组合式 API：defineProps(['userInfo', 'title']) 或带类型校验的对象形式
• 没声明的字段会被忽略，控制台会发出警告

注意响应性边界

传的是响应式对象或数组时，内部属性修改（如 user.name = '新名字'）能触发子组件更新；但若传的是普通对象（const obj = { name: 'a' }），改了也不会更新。