本文详解 vue 3 中 props 的声明、传递与渲染方法，指出常见语法错误（如误用 `{}` 包裹绑定值），并通过修正示例说明如何正确将数据作为 prop 传入子组件并安全显示。
在 vue 3 的单文件组件（SFC）中，props 是父组件向子组件传递数据的核心机制。你遇到的问题——子组件中 {{ title }} 渲染出 {“title”: “Home”} 这样的字符串化对象——根本原因在于 模板中错误地使用了 :title={title} 语法，导致 Vue 将其解析为一个字面量 javaScript 对象，而非响应式数据绑定。
✅ 正确的 props 传递方式：使用 v-bind 简写 : + 双引号
在
组件调用处，应使用标准的绑定语法：</p>
<pre><code class='language-default'><template> <div> <title :title="title" :styling="styling" /> </div> </template></code></pre>
<p>⚠️ 错误写法 :title={title} 会被 Vue 解析为 title: { title: title }（即一个键为 “title” 的对象），因此子组件接收到的 props.title 实际上是一个对象，而非字符串 “Home”。这就是你在 <a href="https://seo.sqjnqi.com/tag/ui/"><b>ui</b></a> 上看到 {“title”: “Home”} 的原因。</p>
<h3>✅ 子组件中正确声明与使用 props</h3>
<p>你的 Title.vue 中 props 声明基本正确，但建议升级为 Vue 3 推荐的组合式 API 风格（或至少保持选项式 API 的完整性）。以下是优化后的版本（仍基于选项式 API，兼容性更好）：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<pre><code class='language-default'><template> <div> <h5 :class="tuc-19bc10f7-1fd7f6-0 styling tuc-19bc10f7-1fd7f6-0">{{ title }}</h5> </div> </template> <script> export <a href="https://seo.sqjnqi.com/tag/default/"><b>default</b></a> { name: 'Title', props: { title: { type: <a href="https://seo.sqjnqi.com/tag/string/"><b>String</b></a>, requi<a href="https://seo.sqjnqi.com/tag/red/"><b>red</b></a>: true, default: 'Untitled' }, styling: { type: String, default: '' } } } </script></code></pre>
<blockquote><p>? 补充说明： :<a href="https://seo.sqjnqi.com/tag/class/"><b>class</b></a>=”styling” 比 class={styling} 更规范（后者是非法语法，Vue 会报错或降级为静态 class）； 为 props 添加 default 值可提升组件健壮性，避免未传参时渲染异常； type: String 已确保类型校验，若传入非字符串（如对象），<a href="https://seo.sqjnqi.com/tag/%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83/"><b>开发环境</b></a>下会触发警告。</p></blockquote>
<h3>? 完整可运行示例（Home.vue）</h3>
<pre><code class='language-default'><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></code></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 的 <script setup> 组合式 API，它语法更简洁、类型推导更友好（尤其搭配 <a href="https://seo.sqjnqi.com/tag/typescript/"><b>typescript</b></a>）。</script></p>
<p>