【vue】v-bind=“$attrs“理解与使用

•  前言：小编在这里说一下这个点的原因主要是为了小编讲其他二次封装组件时为什么要用到这个指令。
• 什么是$attrs：它是 Vue 实例上的一个对象，包含了父组件传递给子组件的所有非props属性（即没有在props中声明的属性）。

组件实例 | Vue.js

• 使用场景： v-bind="$attrs"当我们需要将父组件传递的属性自动绑定到子组件内部的某个元素上时使用。主要用于组件之间的隔代传值，在创建高阶组件或封装组件时非常有用，可以完整的继承该组件的配置
• 解释：用个例子（二次封装已有的 element/antd 等组件，在 tsx 中我们使用接口 interface props 继承当前组件的属性方法；但是在 vue 中我们用的 js ，没法那么用；所以需要 v-bind="$attrs" 来为我们继承上，这样当我们使用针对原element/antd等组件再二次封装后，可以直接再封装后的组件使用 element/antd 这些组件的属性，不需要我们再传一次所有的属性方法，相对比较方便）
• 简单示例：

<!-- ParentComponent.vue -->
<template>
  <ChildComponent data="1" id="child-id" type="info" />
</template>


<!-- ChildComponent.vue -->
<template>
  <div v-bind="$attrs">
    <!-- $attrs 中的内容会被绑定到这里 -->
    This is the child component.
  </div>
</template>

在这个例子中，data="1" id="child-id" type="info"会通过$attrs被绑定到ChildComponent的根div标签(如果我们用的el-input，也是同理)上，如此操作子组件ChildComponent就可以不用props再接一遍父组件ParentComponent传的属性了。

• 注意：默认情况下，vue 会将 $attrs 中的属性自动绑定到组件的根元素上。如果你不希望这种行为，可以通过设置 inheritAttrs: false 来禁用它，然后手动使用 v-bind="$attrs" 来控制属性的绑定位置。

<script>
export default {
  // 禁用默认的属性继承行为
  inheritAttrs: false,
};
</script>