当前位置：首页 > article >正文

UI 组件的二次封装

article 2024/10/30 17:14:32

UI 组件的二次封装是指，在基础 UI 库的组件上进行自定义封装，以实现更贴合业务需求的功能和样式。通过二次封装，可以增强组件的复用性、便捷性和一致性，简化业务代码，同时降低后续维护成本。

1. 二次封装的原理

二次封装基于对原有组件的拓展和定制，一般使用组合和继承的方式实现。具体实现时，可以利用基础 UI 组件库（如 Element Plus、Vant、Ant Design 等）中的现有组件，通过添加额外的属性、方法或样式，实现业务层面所需的定制功能。

核心思想包括：

1、组合和继承：基于已有组件，通过组合或继承来实现新的组件功能。

2、属性代理：将原有组件的属性透传到封装组件，以保持原组件的功能。

3、事件透传：将用户操作的事件传递给外部调用者，支持外部绑定事件处理。

4、样式定制：通过样式扩展或修改，实现特定样式需求。

5、业务逻辑注入：通过自定义逻辑封装特定的业务逻辑，比如权限控制、数据校验、异步加载等。

2. 原理解释

1、对属性和事件的传递

举个 🌰，对 Element-plus 的 el-input 进行处理。

在 App.vue 中：

<template>
  <MyInput a="1" b="2" c="3" @change="() => {}" v-model="defaultValue" />
</template>

<script setup>
import MyInput from './components/MyInput.vue'
import { ref } from 'vue'
const defaultValue = ref('default value')
</script>

在 MyInput.vue 中：

<template>
  <div class="my-input">
    <ElInput />
  </div>
</template>
<script>
import { ElInput } from 'element-plus';
export default {
  components:{
    ElInput
  },
  mounted() {
    console.log(this.$attrs)
  }
}
</script>

使用 $attrs 获取父组件传递的数据，展示为：

但当我们在自定义组件内部声明同名属性时：

<template>
  <div class="my-input">
    <ElInput />
  </div>
</template>
<script>
import { ElInput } from 'element-plus'
export default {
  props: ['a'],
  components: {
    ElInput
  },
  mounted() {
    // this.$attrs 会自动剔除掉声明的属性，也就是在 props 内部定义的
    console.log(this.$attrs)
  }
}
</script>

展示如下：

这个现象是合理的，声明这个属性，说明我们接下来需要使用它做一些额外的处理，对组件本身是有意义的。而没有声明的数据，就汇总到 $attrs 中，可以将这些属性透传给原始组件本身。

如下：

<template>
  <div class="my-input">
    <ElInput v-bind="$attrs"/>
  </div>
</template>
<script>
import { ElInput } from 'element-plus'
export default {
  props: ['a'],
  components: {
    ElInput
  },
  mounted() {
    console.log(this.$attrs)
  }
}
</script>

对此可以实现，将传递过来的、无需额外更改的属性和方法，透传到 UI 库组件本身。

2、对插槽（slot）进行处理

在 App.vue 中，传递两个插槽内容。

<template>
  <MyInput>
    <template #prepend>
      <el-button>prepend</el-button>
    </template>
    <template #append>
      <el-button>append</el-button>
    </template>
  </MyInput>
</template>

在 MyInput 组件中：

<template>
  <div class="my-input">
    <ElInput v-bind="$attrs">
      <!-- 遍历传递给当前组件的所有插槽（$slots），并生成每个插槽对应的模板。 -->
      <template v-for="(_, name) in $slots" #[name]="scopeValue">
        <slot :name="name" v-bind="scopeValue"></slot>
      </template>
    </ElInput>
  </div>
</template>

展示如下，父组件将插槽内容传递给子组件。

3、对 ref 的传递（!important）

虽然在某些特殊的场景下需要使用 ref，但是不建议对 ref 进行传递，那如何处理呢？

在父组件中获取子组件的对象，无非是使用其方法和属性，那就将这些属性传递出去。

App.vue

<template>
  <MyInput ref="myInput"></MyInput>
</template>

<script setup>
import MyInput from './components/MyInput.vue'
import { onMounted, ref } from 'vue'
const myInput = ref(null)
onMounted(() => {
  console.log('~ myInput:', myInput.value)
  myInput.value.focus && myInput.value.focus()
})
</script>

MyInput.vue

<template>
  <div class="my-input">
    <el-input ref="input" />
  </div>
</template>
<script>
import { ElInput } from 'element-plus'
export default {
  components: {
    ElInput
  },
  mounted() {
    console.log('refs', this.$refs.input)
    for (let key in this.$refs.input) {
      // 将组件 input 上的方法，添加到该组件本身，也就是 MyInput 组件
      this[key] = this.$refs.input[key]
    }
  }
}
</script>