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>
在 App.vue 中调用子组件的 focus 方法:
以此实现,父组件调用子组件的方法。