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