父子组件传值核心是父传子用Props、子传父用$emit；Props需显式声明，支持类型校验和默认值，且只读，修改需通过事件通知父组件。
父子组件传值，核心就是 父传子用 Props，子传父用事件（$emit）。Props 是 Vue 最基础、最常用的单向数据流机制，理解它，就掌握了 Vue 组件通信的起点。
父组件怎么把数据传给子组件？—— 正确声明和使用 Props
子组件必须显式声明它要接收哪些 props，Vue 才会把父组件传来的值注入进去。不声明，值传了也拿不到。
- 在子组件中用 props 选项定义，可以是数组（简单写法）或对象（推荐，支持类型校验和默认值）
- 父组件中像绑定 HTML 属性一样传值：
<child-component :message="parentMsg" :count="10"></child-component> - 注意加冒号
:（即v-bind），否则传的是字符串字面量，不是响应式数据
Props 的类型校验和默认值怎么设？—— 让传值更安全
用对象形式声明 props，能避免运行时错误，也方便团队协作和调试。
Element Plus UI Vue3
下载
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
-
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', '新标题') - 父组件响应：
<child-component :title="pageTitle"></child-component> - 这种模式也是
v-model的底层原理（Vue 2 中对应value + input，Vue 3 对应modelValue + update:modelValue）
常见坑点提醒 —— 新手容易卡住的地方
-
驼峰命名 vs 短横线分隔：JS 中 props 写
myProp，模板中要用my-prop（<comp :my-prop="val"></comp>） -
异步数据还没来，props 是 undefined：记得在子组件中加判断，或用
default提供兜底值 -
对象/数组 props 修改后视图不更新：不是 props 不能改，而是你改的是引用内容（如
arr.push()是响应的），但直接赋值this.list = []就不行——因为这是在改 props 本身 -
父组件数据变化，子组件没更新：检查是否用了非响应式方式修改（如直接索引赋值
arr[0] = x），或对象新增属性没用Vue.set（Vue 2）
