父子组件传值核心是父传子用Props、子传父用$emit；Props需显式声明，支持类型校验和默认值，且只读，修改需通过事件通知父组件。
父子组件传值，核心就是 父传子用 Props，子传父用事件（$emit）。Props 是 Vue 最基础、最常用的单向数据流机制，理解它，就掌握了 Vue 组件通信的起点。
父组件怎么把数据传给子组件？—— 正确声明和使用 Props
子组件必须显式声明它要接收哪些 props，Vue 才会把父组件传来的值注入进去。不声明，值传了也拿不到。
- 在子组件中用 props 选项定义，可以是数组（简单写法）或对象（推荐，支持类型校验和默认值）
- 父组件中像绑定 HTML 属性一样传值：
- 注意加冒号
:（即v-bind），否则传的是字符串字面量，不是响应式数据
Props 的类型校验和默认值怎么设？—— 让传值更安全
用对象形式声明 props，能避免运行时错误，也方便团队协作和调试。
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
-
type指定类型（String、Number、Boolean、Array、Object、Function等） -
default设默认值；如果是对象或数组，必须用函数返回，防止多个实例共享同一引用 -
required: true标记必填项，没传会警告
示例：
export default {
props: {
title: { type: String, required: true },
list: { type: Array, default: () => [] },
isActive: { type: Boolean, default: false }
}
}
子组件想改父组件的数据？别直接改！—— 遵守单向数据流原则
Props 是只读的。如果子组件直接修改（比如 this.title = 'new'），Vue 会报警告，且不会同步到父组件。
- 如需“更新父数据”，正确做法是：子组件触发自定义事件（
$emit），父组件监听并修改自己的数据 - 例如子组件内部：
this.$emit('update:title', '新标题') - 父组件响应：
- 这种模式也是
v-model的底层原理（Vue 2 中对应value + input，Vue 3 对应modelValue + update:modelValue）
常见坑点提醒 —— 新手容易卡住的地方
-
驼峰命名 vs 短横线分隔：JS 中 props 写
myProp，模板中要用my-prop（ -
异步数据还没来，props 是 undefined：记得在子组件中加判断，或用
default提供兜底值 -
对象/数组 props 修改后视图不更新：不是 props 不能改，而是你改的是引用内容（如
arr.push()是响应的），但直接赋值this.list = []就不行——因为这是在改 props 本身 -
父组件数据变化，子组件没更新：检查是否用了非响应式方式修改（如直接索引赋值
arr[0] = x），或对象新增属性没用Vue.set（Vue 2）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
