本文详解 vue 3 中 props 的声明、传递与渲染方法，指出常见语法错误（如误用 `{}` 包裹绑定值），并通过修正示例说明如何正确将数据作为 prop 传入子组件并安全显示。
在 Vue 3 的单文件组件（SFC）中，props 是父组件向子组件传递数据的核心机制。你遇到的问题——子组件中 {{ title }} 渲染出 {"title": "Home"} 这样的字符串化对象——根本原因在于 模板中错误地使用了 :title={title} 语法，导致
Vue 将其解析为一个字面量 JavaScript 对象，而非响应式数据绑定。
✅ 正确的 props 传递方式：使用 v-bind 简写 : + 双引号
在
组件调用处，应使用标准的绑定语法：<pre class="brush:php;toolbar:false;"><template>
<!-- ✅ 正确：冒号后接变量名，用双引号包裹 -->
<Title :title="title" :styling="styling" />
</template></pre><p>⚠️ 错误写法 :title={title} 会被 Vue 解析为 title: { title: title }（即一个键为 "title" 的对象），因此子组件接收到的 props.title 实际上是一个对象，而非字符串 "Home"。这就是你在 UI 上看到 {"title": "Home"} 的原因。</p>
<h3>✅ 子组件中正确声明与使用 props</h3>
<p>你的 Title.vue 中 props 声明基本正确，但建议升级为 Vue 3 推荐的组合式 API 风格（或至少保持选项式 API 的完整性）。以下是优化后的版本（仍基于选项式 API，兼容性更好）：</p><pre class="brush:php;toolbar:false;"><!-- Title.vue -->
<template>
<!-- 使用 class 绑定动态样式类 -->
<h5 :class="styling">{{ title }}</h5>
</template>
</pre><blockquote>? 补充说明： :class="styling" 比 class={styling} 更规范（后者是非法语法，Vue 会报错或降级为静态 class）； 为 props 添加 default 值可提升组件健壮性，避免未传参时渲染异常； type: String 已确保类型校验，若传入非字符串（如对象），开发环境下会触发警告。</blockquote>
<h3>? 完整可运行示例（Home.vue）</h3><pre class="brush:php;toolbar:false;"><!-- Home.vue -->
<template>
<Title :title="title" :styling="styling" />
</template>
</pre><h3>? 总结：三大关键点</h3>
<ul>
<li>
<strong>绑定语法无 {}</strong>：v-bind:title="title" 或简写 :title="title"，<strong>不是</strong> :title={title}； </li>
<li>
<strong>子组件必须显式声明 props</strong>：通过 props 选项定义类型、是否必填及默认值； </li>
<li>
<strong>模板中直接使用 {{ title }} 即可</strong>：无需解构或额外处理，Vue 自动提供响应式访问。</li>
</ul>
<p>掌握这些基础规则，就能避免绝大多数 props 传递和渲染问题。随着深入学习，推荐逐步迁移到 Vue 3 的 </p>
Vue 将其解析为一个字面量 JavaScript 对象，而非响应式数据绑定。