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