本文详解 vue 3 单文件组件中 props 的正确传递方式，指出常见语法错误（如误用 `{}` 包裹绑定值），并提供规范的 `v-bind` 写法、类型校验、默认值设置及调试建议。
在 Vue 3 的组合式 API 或选项式 API 中，props 是父组件向子组件传递数据的核心机制。你遇到的问题——子组件中 {{ title }} 渲染出 {"title": "Home"} 这样的字符串——根本原因在于模板中错误地使用了 JavaScript 对象字面量语法 {:title={title}}，导致 Vue 将 title 属性当作一个对象而非字符串值解析。
✅ 正确写法：使用标准 v-bind（简写 :）语法
在父组件
<template>
<div>
<!-- ❌ 错误：:title={title} → Vue 会将 {title} 解析为一个对象 -->
<!-- ✅ 正确：:title="title" → 绑定 data 中的字符串值 -->
<Title :title="title" :styling="styling" />
</div>
</template>? 原理解释：: 是 v-bind 的缩写，其后跟的是 JavaScript 表达式。"title" 是字符串字面量；而 "{title}" 是无效语法；{title} 则会被解析为一个对象 { title: title }（即 title 作为键，其值为当前作用域的 title 变量），这正是你看到 {"title": "Home"} 的原因。
✅ 子组件：props 声明与使用（Vue 3 选项式 API）
你的 Title.vue 组件 props 声明基本正确，但可进一步增强健壮性：
<script>
export default {
name: 'Title',
props: {
title: {
type: String,
required: true,
default: 'Untitled' // 推荐添加默认值，避免未传时渲染异常
},
styling: {
type: String,
default: '' // 空字符串更安全，避免 class="undefined"
}
}
}
</script>
<template>
<div>
<!-- ✅ 正确：直接插值，无需 {} -->
<h5 :class="styling">{{ title }}</h5>
</div>
</template>⚠️ 注意：
写法在 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<Props>() - 避免在模板中重复计算：如需动态 class，优先用 :class="{ 'text-center': isCentered }" 而非拼接字符串。
- 命名一致性：Prop 名建议使用 camelCase（如 pageTitle），但在 HTML 模板中用 kebab-case（page-title）绑定（Vue 自动转换）。
掌握 :propName="value" 这一基础语法，是 Vue 开发的基石。记住：: 后是 JS 表达式，不是 JSON；绑定字符串就写 "xxx"，绑定变量就写 xxx，永远不要写 {xxx}。
