1.attrs 属性
在 Vue 3 中，
<font style="color:rgb(6, 6, 7);">attrs</font>是一个包含了父作用域中不作为<font style="color:rgb(6, 6, 7);">props</font>被识别（且不是<font style="color:rgb(6, 6, 7);">v-on</font>事件监听器）的属性绑定（<font style="color:rgb(6, 6, 7);">class</font>和<font style="color:rgb(6, 6, 7);">style</font>除外）的对象。当你在组件中使用<font style="color:rgb(6, 6, 7);">v-bind="$attrs"</font>时，这些不被识别的属性将会被透传到组件的根元素上。如果组件有多个根元素或者你希望将这些属性应用到非根元素上，你可以在模板中直接使用<font style="color:rgb(6, 6, 7);">$attrs</font>，或者在<font style="color:rgb(6, 6, 7);"><script setup></font>中使用<font style="color:rgb(6, 6, 7);">useAttrs()</font>来访问这些属性。
2.使用 attrs 的场景
- 属性透传：当父组件传递给子组件的属性没有在子组件中被声明为
props时，这些属性会通过$attrs透传给子组件。这允许子组件访问到所有未被识别的属性，而无需手动声明。 - 禁用属性继承：如果你不希望组件自动继承属性，可以在组件选项中设置
inheritAttrs: false。这样，你可以完全控制透传的属性如何被使用。 - 多根节点的组件：对于有多个根节点的组件，Vue 不会自动透传属性。如果
$attrs没有被显式绑定，将会抛出一个运行时警告。你可以通过显式绑定$attrs来解决这个问题。 - 在 JavaScript 中访问透传属性：如果你需要在组件的 JavaScript 代码中访问透传的属性，可以使用
useAttrs()API。这在<script setup>中特别有用，因为$attrs在模板中是可用的，但在 JavaScript 中默认不可用。
3.实际使用
Submit
Button.vue组件，并将其命名为CustomButton。我们传递了type,disabled, 和class属性给这个按钮，并绑定了一个点击事件监听器。
- 通用按钮组件：这个组件使用
useAttrs钩子来获取所有透传的属性，并将它们绑定到button元素上。这样，无论父组件传递什么属性，都会被应用到按钮上。- 父组件：父组件使用通用按钮组件，并传递一些属性和事件监听器。这些属性和事件监听器都会被透传到按钮组件上。
- 样式：按钮组件中的
<style>标签定义了按钮的样式，使其具有基本的视觉效果。
4.Vue 中$props、$attrs 和$listeners 的使用详解
:::color1
作用：
- $attrs: 在 A(爷) -> B(父) -> C(子) 的传值的过程中，B 组件绑定$attrs，C 组件就可直接获取到 A 组件传入的属性(且该属性未在 B 组件中未通过 props 接收)
- $listeners: 在 C(子) -> B(父) -> A(爷)的触发自定义事件并向上传值的过程中，A 组件中可以直接绑定 C 组件中的事件(且该事件未在 B 组件中触发)
:::
（1）$props：当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。
（2）$attrs：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。
（3）$listeners：包含了父作用域中(不含 .native 修饰器的)v-on 事件监听器。他可以通过 v-on=”listeners”传入内部组件
1、父组件
父亲组件
2. 儿子组件（Child.vue）
中间层，作为父组件和孙子组件的传递中介，在儿子组件中给孙子组件添加
<font style="color:rgb(38, 198, 218);">v-bind="$attrs"</font>，这样孙子组件才能接收到数据。$attrs 是从父组件传过来的，且儿子组件未通过 props 接收的数据.
儿子组件--{{ $props.foo }}与{{ foo }}内容一样
3. 孙子组件（GrandChild.vue）
在孙子组件中一定要使用 props 接收从父组件传递过来的数据
孙子组件
传给孙子组件的数据：{{ zoo }}
从上面的代码，可以看出使用attrs、inheritAttrs属性 能够使用简洁的代码，将A 组件的数据传递给C 组件，该场景的使用范围还是挺广的。
通过listeners，我们在 b 组件上 绑定 v-on=”$listeners”, 在 a 组件中，监听 c 组件触发的事件。就能把 c 组件发出的数据，传递给 a 组件。
