父子组件传基础数据用props；未声明属性通过inheritattrs控制是否自动挂载根元素，设为false后可用$attrs精准透传至指定元素，事件监听器也归入$attrs统一透传。
父子组件间传基础数据，最直接的是用 props；而处理那些没被 props 接收的属性（比如 id、data-* 、aria-*），就得靠 inheritAttrs 配合 $attrs 控制透传位置。
用 props 传递明确的数据
父组件把值当属性传，子组件在 props 里声明接收，这是单向、显式、类型可控的方式。
- 父组件写：
<user-card :name="userName" :age="28"></user-card> - 子组件声明：
props: { name: String, age: Number } - 未声明的属性（如
data-id="101"）默认会落到子组件根元素上——除非你关掉它
控制非 props 属性是否自动挂载到根元素
inheritAttrs: false 的作用就是关掉这个“自动挂载”行为。它不改变 $attrs 的内容，只影响 Vue 是否把未识别的属性自动加到模板最外层标签上。
- 默认
inheritAttrs: true：所有未被 props 接收的属性（除class和style）会出现在根元素上 - 设为
false后：class仍会继承（Vue 特殊保留），其他属性不会自动出现，但全都在this.$attrs里等着你手动用 - 典型场景：封装一个带
<label></label>包裹的输入框，你想把placeholder给内部<input>，而不是塞到<label></label>标签上
用 $attrs 实现精准透传
$attrs 是个对象，装着所有没被 props 拿走的绑定属性（class 和 style 除外）。你可以用 v-bind="$attrs" 把它们一次性透传给子组件里的某个具体元素。
- 子组件模板中：
<input v-bind="$attrs">—— 所有父传来的非 props 属性就都到了 input 上 - 也可以挑着用：
<input :placeholder="$attrs.placeholder" :id="$attrs['data-id']"> - 配合
inheritAttrs: false，能避免属性错位，让结构更干净、语义更准确
事件也支持类似透传（$listeners 已合并进 $attrs）
Vue 2 中曾用 $listeners 透传事件；Vue 3 起已合并进 $attrs。只要父组件绑了原生事件（如 @click、@keyup.enter），且子组件没用 emits 显式声明，这些事件监听器就会自动进入 $attrs。
- 子组件中写：
<button v-bind="$attrs">提交</button> - 父组件写：
<submit-btn></submit-btn> - 点击或回车都会触发父组件的
onSubmit，无需子组件额外 emit
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
