• 对透传 Attributes 的理解

    结论先行：

    透传 Attributes 也叫 属性继承。

    指的是将在父组件中定义的属性会传递给子组件，不需要在子组件中声明 props。

    透传的属性会自动被添加到根元素上。

    如果子组件不是以单个元素为根，那么就要使用 v-bind="$attrs" 来绑定透传的属性；

    在组件选项中设置 inheritAttrs: false 就可以禁用 attribute 继承；

    在 Vue3 中，使用 useAttrs() 访问一个组件的所有透传 attribute；

    具体分析： 

    官方文档：透传 Attributes | Vue.js 

    1、概念 

    透传 Attributes 也叫 属性继承。

    指的是将在父组件中定义的属性会传递给子组件，子组件中不需要声明 props 或者 emit 。

    前提：子组件是以单个元素为根作渲染时， 透传的 attribute  会自动被添加到根元素上。

    2、例子 

    常见的例子就是透传 class / style / id 等

     并没有将 class 声明为一个它所接受的 prop，所以 class 被视作透传 attribute，自动透传到了  的根元素上。 

    若子组件的根元素上已经有了 class 属性，那它会和从父组件上继承的值合并。 

    1. // 父组件
    2. <MyButton class="large" />
    3.  
    4. // 子组件 MyButton 最后渲染的结果
    5. <button class="large">click mebutton>

    如果父组件传入属性，子组件中声明了相同的属性。那么写在最下面的属性生效。

    例如，不管父组件传入的属性 allow-clear 是 true 还是 false，生效的都是 true

    3、 禁用 Attributes 继承

    在组件选项中设置 inheritAttrs: false 就可以禁用 attribute 继承

    ① 场景

    最常见的需要禁用  Attributes 继承的场景就是 attribute 需要应用在根节点以外的其他元素上。也就是控制透传进来的 attribute  被如何使用。

    ② 如何访问

    这些透传进来的 attribute 可以在模板的表达式中直接用 $attrs 访问到。

    通过 $attrs['foo-bar'] 或者 $attrs.onClick 来访问 

    Fallthrough attribute: {{ $attrs }}

    如果透传 attribute 都应用在内部的