Vue 使用技巧：优雅的进行二次封装 UI 库组件

“我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情”

前提概要：

作为一个前端搬砖工程师经常需要搬砖，封装一些第三方组件，在添加新的属性、插槽、事件时候就会想应该怎么去保留，向外抛出封装原本第三方组件提供的属性、插槽、事件；但是如果是一个个属性和事件以及插槽进行重新声明定义，虽然也是可行的，但是未免也太过于麻烦了，并且这种做法在升级了原本依赖的 UI 库后某些新增或者 break-change 的时候就会发生不明所以的 bug 了。

因此这篇文章就简单的介绍怎么分别来优雅的保留着第三方 UI 库组件原提供的属性（Attributes）、插槽（Slots）和自定义事件（Events），提高生产力效率和代码质量！

一、属性【Attributes】：

$attrs：组件实例的该属性包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class和style除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class和style除外)，并且可以通过v-bind="$attrs"传入内部的 UI 库组件中。

inheritAttrs：默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上，也就是下面例子的 MyButton 组件上面也会存在这些想要透传的属性，这可能不会总是符合预期行为。因此此时需要通过设置inheritAttrs到false，将 Vue.js 的这个默认行为给去掉。而通过实例的$attrs可以让这些透传的 attribute 生效，且通过v-bind显性的绑定到非根元素第三方 UI 库的组件上了。

// MyButton.vue

<template>
  <a-button v-bind="$attrs" >
    <slot />
  </a-button>
</template>
<script> 
  export default { 
    inheritAttrs: false,
  }
</script>

二、自定义事件【Events】：

$listeners：组件实例的该属性包含了父作用域中的(不含.native修饰器的)v-on事件监听器。它可以通过v-on="$listeners"转发传入内部组件，进行对事件的监听处理。

需要留意：如果既使用了v-on="$listeners"进行转发事件，并且二次封装的组件内也对原 UI 库组件的事件进行监听调用，此时事件会触发两次，需要注意这个问题！

// MyInput.vue

<template>
  <a-input v-bind="$attrs" v-on="$listeners" />
</template>
<script> 
  export default { 
    inheritAttrs: false,
  }
</script>

三、插槽【Slots】：

$slots：普通插槽比较好理解，使用$slots这个变量拿到非作用域的插槽分发内容，然后循环渲染对应的普通具名插槽，这样就能够直接打通封装组件的插槽和第三方组件提供的原插槽；

$scopedSlots：作用域插槽则绕了一圈，使用了一个插槽的语法糖（具名插槽的缩写）并且结合着动态插槽名的用法；循环$scopedSlots并且插入到第三方组件提供的原作用域插槽位置，在里面才创建封装组件自己的作用插槽位置和传递对应的参数，间接打通了作用域插槽的通道。

// MyTable.vue

<template>
  <a-table v-bind="$attrs" v-on="$listeners">
    <!-- 普通插槽 -->
    <slot v-for="(_, slotName) in $slots" :name="slotName" :slot="slotName"/>

    <!-- 作用域插槽 -->
    <template v-for="(_, scopeSlotName) in $scopedSlots" #[scopeSlotName]="scope" >
      <slot :name="scopeSlotName" v-bind="scope" />
    </template>
  </a-table>
</template>
<script>
  export default {
    inheritAttrs: false,
  };
</script>

四、额外加餐

大家应该都知道上面描述主要都是 Vue 2.x 的场景（毕竟现在 2.x 还是在市场上占用不少的份额的嘛），在 Vue 3.x 当中有些 API 是有所调整的，因此这里也简单讲述下 Vue 3.x 的变动调整，主要还是一些组件实例的属性之间的合并。

`$attrs` 与 `$listeners` 合并

在 Vue 3.x 当中，取消了$listeners这个组件实例的属性，将其事件的监听都整合到了$attrs这个属性上了，因此在 Vue 3.x 当中是简化了操作，直接通过v-bind和$attrs属性就可以进行 props 属性和 event 事件的透传分发了。

// MyButton.vue

<template>
  <a-button v-bind="$attrs" >
    <slot />
  </a-button>
</template>
<script> 
  export default { 
    inheritAttrs: false,
  }
</script>

<template>
  <my-button size="small" @click="handleClickEvent" >
    这是二次封装的按钮组件
  </my-button>
</template>
<script setup>
  const handleClickEvent = () => {
    // TODO：xxxx
  }
</script>

`$slot` 与 `$scopedSlots` 合并

同样，在 Vue 3.x 当中取消了作用域插槽$scopedSlots的属性，将所有插槽都统一在$slots当中，因此在 Vue 3.x 当中最简单粗暴的方法就是直接无分默认插槽、具名插槽和作用域插槽进行统一的处理。

// MyTable.vue

<template>
  <a-table v-bind="$attrs">
    <template v-for="(_, scopeSlotName) in $slots" #[scopeSlotName]="scope" >
      <slot :name="scopeSlotName" v-bind="scope" />
    </template>
  </a-table>
</template>
<script>
  export default {
    inheritAttrs: false,
  };
</script>

参考资料：

同系列文章：

Vue 使用技巧：devtools 的一些使用秘籍