
本文详解 vue 3 单文件组件中 props 的正确声明、传递与使用方式,指出常见语法错误(如误用 `{}` 包裹绑定值),并通过代码示例说明如何避免 props 被解析为字面对象,确保数据正常渲染。
在 Vue 3 的组合式 API 或选项式 API 中,props 是父子组件通信的核心机制。你遇到的问题——UI 上显示 {"title": "Home"} 而非纯文本 "Home"——根本原因在于 模板中错误地使用了 :title={title} 这种语法,导致 Vue 将其解释为一个 JavaScript 对象字面量(即 {title: title}),而非期望的字符串值。
✅ 正确写法:使用 :propName="value"(不加外层大括号)
在
⚠️ 注意:
- : 是 v-bind: 的缩写,表示响应式绑定;
- "title" 是表达式(此处是 data 中定义的变量名),不能加 {};
- {title} 是一个对象字面量(等价于 { title: title }),Vue 会将其整个作为 prop 值传入,因此子组件接收到的是对象而非字符串。
✅ 子组件中正确声明与使用 props
你的 Title.vue 中 props 声明本身是正确的,但建议升级为更清晰的写法(尤其在 Vue 3 中推荐使用 defineProps 编译宏):
立即学习“前端免费学习笔记(深入)”;
✅ 推荐写法(Vue 3
{{ title }}
? 补充说明: 在 Vue 2 中可能被支持,但在 Vue 3 中应使用 :class="styling" 或 class="{{ styling }}"(仅限静态类)。动态绑定 class 推荐用 :class,语义更明确且兼容性更好。
? 完整可运行示例(选项式 API 兼容版)
如果你仍在使用选项式 API(如原问题所示),请确保:
- 父组件 Home.vue 中 data() 返回的是响应式数据;
- 子组件 Title.vue 中 props 声明与接收一致;
- 模板中绑定语法无冗余符号。
修正后的 Home.vue:
⚠️ 常见误区总结
| 错误写法 | 含义 | 后果 |
|---|---|---|
| :title={title} | 传入对象 { title: title } | 子组件 props.title 是对象,{{ title }} 渲染为 [object Object] 或 JSON 字符串 |
| title="title" | 静态字符串字面量 "title" | 总是显示文字 "title",不响应数据变化 |
| :title=title(无引号) | ✅ 正确:绑定变量 title 的值 | 推荐写法 |
✅ 最佳实践建议
- 优先使用
- 所有必填 props 显式标注 required: true;
- 为可选 props 提供 default(函数形式用于对象/数组);
- 使用 :class / :style 进行动态属性绑定,避免直接操作 DOM 属性;
- 开发时开启 Vue Devtools,实时检查组件 props 值,快速定位传递异常。
掌握 props 的正确绑定语法,是构建可维护 Vue 应用的第一步。从 :prop="value" 开始,告别 {prop} 式误解,让数据流动清晰可控。










