对Element UI 组件的二次封装

一、二次封装 Element UI 组件的核心思路

二次封装 Element UI 组件的主要目的是提高代码复用性、统一业务逻辑、简化调用方式。通过合理封装可以解决重复代码问题，同时保持组件灵活性。
二次封装的组件应该保持原组件所有的属性方法并且支持原组件所接收的插槽。

二、属性和插槽如何传递

useAttrs --- 调用 useAttrs() 获取的所有属性绑定到这个组件上，该方法接收来自父组件传递的所有属性。
useSlots --- 调用 useSlots() 获取当前组件的所有插槽。这个对象包含了所有父组件传递的插槽信息。

示例：

javascript 复制代码

<template>
  <el-card v-bind="attrs">
      <template v-for="(_,name) in slots" #[name]="scopedData">
          <slot :name="name" v-bind="scopedData"></slot>
      </template>
  </el-card>
</template>

<script setup>
import { useAttrs , useSlots } from 'vue';
const attrs = useAttrs();
const slots = useSlots();
</script>

<style lang="scss" scoped>
.el-card {
  // border-radius: 0.75rem;
  border-radius: 5px;
  box-shadow: rgba(0, 0, 0, 0.1) 0rem 0.25rem 0.375rem -0.0625rem, rgba(0, 0, 0, 0.06) 0rem 0.125rem 0.25rem -0.0625rem;
  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  :deep(.el-card__body) {
    height: 100%;
  }
}
</style>

使用 v-bind="attrs" 绑定，表示将从 useAttrs() 获取的所有属性绑定到这个组件上，这使得我们可以像使用原组件属性那样使用我们二次封装的组件。
v-for="(_,name) in slots" 这里使用 v-for 指令对 slots 中的每一个插槽进行迭代。(_, name) 表示我们不关心插槽的第一个值（即无用的索引值），而只关注插槽的名称。
#[name]="scopedData" 用于定义具名插槽。name 是插槽的名称，scopedData 是从 useSlots() 获取到的插槽数据(Vue 3)。
<slot :name="name" v-bind="scopedData"></slot> 这个标签用于渲染从父组件传递过来的内容。它将插槽名称和作用域数据传递给父组件，使得父组件可以访问这些数据并根据需要渲染内容。

三、其他自定义

使用上述方法后，原组件的属性和插槽基本被保留下来，我们可以像使用原组件那样使用我们封装的组件，在此基础上，我们可以对组件进行其他的定义化。

比如上述例子，重新调整了<el-card/>的样式。

此外调用useAttrs()会返回一个响应式对象，包含所有未在 props 中声明的父组件传递的属性，这意味着如果你有某个属性不想直接绑定在原组件上，可以通过props声明而忽略掉，从而自定义处理这些属性。

更多请参考：Vue.js