Vue3 属性透传 $attrs 与 插槽透传 $slots

当我们要复写各类 UI 组件的时候，为了保证UI组件的参数与插槽都能使用，且不用重复定义，我们可以通过属性透传与插槽透传来实现

vue $slots 传送门

vue $attrs 传送门

属性透传 $attrs

$attrs 一个包含了组件所有透传 attribute 的对象（不包含已定义的 props）。

透传 Attribute 是一些由父组件传入的 attribute 和 事件处理器，且没有在此子组件中声明为一个 prop 或要抛出的事件。

默认情况下，若是单一根节点组件，$attrs 中的所有 property 都是直接自动继承自组件的根元素。而多根节点组件则不会如此，同时你也可以通过配置 inheritAttrs 选项来显式地关闭该行为。

实现属性透传

// 自定义的 MyButton
<el-button v-bind="$attrs"></el-button>
// 其他组件调用
<MyButton type="primary">按钮<MyButton>
/**
 * type="primary" 将会通过 v-bind="$attrs" 透传给 el-button 组件
 */

插槽透传 $slots

$slots 一个表示父组件所传入插槽的对象。

通常用于手写渲染函数，但也可用于检测是否存在插槽。

每一个插槽都在 this.$slots 上暴露为一个函数，返回一个 vnode 数组，同时 key 名对应着插槽名。默认插槽暴露为 this.$slots.default。

如果插槽是一个作用域插槽，传递给该插槽函数的参数可以作为插槽的 prop 提供给插槽。

实现插槽透传

// 自定义组件 MyButton
<el-button v-bind="$attrs">
  <!-- 通过便利实现插槽透传 -->
  <template v-for="(item, key, index) in $slots" :key="index" v-slot:[key]>
    <slot :name="key"></slot>
  </template>
</el-button>
// 其他组件调用
<MyButton type="primary">
  <el-icon><Back /></el-icon>
<MyButton>