如何在 Vue 3 中正确传递和使用 props（含模板语法与注意事项）
发表时间：2025-12-31 00:00:00
文章作者：心靈之曲
浏览次数：
本文详解 vue 3 单文件组件中 props 的正确传递方式，指出常见语法错误（如误用 `{}` 包裹绑定值），并提供规范的 `v-bind` 写法、类型校验、默认值设置及调试建议。
在 Vue 3 的组合式 API 或选项式 API 中，props 是父组件向子组件传递数据的核心机制。你遇到的问题——子组件中 {{ title }} 渲染出 {"title": "Home"} 这样的字符串——根本原因在于模板中错误地使用了 JavaScript 对象字面量语法 {:title={title}}，导致 Vue 将 title 属性当作一个对象而非字符串值解析。
✅ 正确写法：使用标准 v-bind（简写 :）语法
在父组件
? 原理解释：: 是 v-bind 的缩写，其后跟的是 JavaScript 表达式。"title" 是字符串字面量；而 "{title}" 是无效语法；{title} 则会被解析为一个对象 { title: title }（即 title 作为键，其值为当前作用域的 title 变量），这正是你看到 {"title": "Home"} 的原因。
✅ 子组件：props 声明与使用（Vue 3 选项式 API）
你的 Title.vue 组件 props 声明基本正确，但可进一步增强健壮性：
{{ title }}
⚠️ 注意：
写法在 Vue 3 模板中无效（会报错或被忽略），必须使用 :class="styling" 或 class="{{ styling }}"（不推荐，仅限纯字符串）。class 是 HTML 属性，需通过 v-bind:class 动态绑定。
立即学习“前端免费学习笔记（深入）”；
? 调试建议与最佳实践
- 开启 Vue Devtools：检查组件实例的 props 面板，确认传入值是否为预期类型（如 string 而非 object）。
-
启用严格类型检查（TypeScript）：若项目支持 TS，可定义 props 类型
接口，编译期捕获绑定错误：interface Props { title: string styling?: string } defineProps() - 避免在模板中重复计算：如需动态 class，优先用 :class="{ 'text-center': isCentered }" 而非拼接字符串。
- 命名一致性：Prop 名建议使用 camelCase（如 pageTitle），但在 HTML 模板中用 kebab-case（page-title）绑定（Vue 自动转换）。
接口，编译期捕获绑定错误：掌握 :propName="value" 这一基础语法，是 Vue 开发的基石。记住：: 后是 JS 表达式，不是 JSON；绑定字符串就写 "xxx"，绑定变量就写 xxx，永远不要写 {xxx}。
