背景
在实际开发中每个开发者应该都有经历过对组件进行二次封装,在进行封装的时候需要保留组件已有的功能,这时需要重写组件方法,当组件已有大量功能时候,则需要重写很多重复代码。且组件功能进行修改的时候,封装的组件也需要对应修改,从而造成许多开发和维护成本。下面将从三个方面来基于 Element UI 的el-input
组件简单实现一下组件的二次封装。
第一方面:属性绑定
在对组件封装的时候首先会遇到就是绑定属性了,简单说就是将二次封装的组件属性绑定到el-input
组件上。 可能有些小伙伴做的时候会将el-input
的属性全部写到封装组件 props 里面,然后再将这些属性绑定到el-input
组件上。这样做不是不行,但是太鸡肋了,而且浪费时间。那该如何做呢?
在 vue 实例中有一个属性$attrs
,这个属性包含了组件所有透传attributes
的对象。是指由父组件传入,且没有被子组件声明为 props 或是组件自定义事件的 attributes 和事件处理函数。 那我们就可以直接将$attrs
以v-bind
动态绑定到el-input
组件上,就可以解决属性绑定这方面的问题了。
vue
<template>
<el-input ref="refInput" v-bind="$attrs"></el-input>
</template>
<script>
export default {
}
</script>
第二方面:插槽
第二方面就是插槽的绑定了,可以和属性绑定一样,将所有的插槽全部写出来,然后再一个一个写到el-input
组件上,如果插槽不多,也没有什么影响,但是如果插槽很多呢,如果二次封装的是有可能会修改的组件呢?那这个二次封装的组件也要同步修改,很麻烦!那又该如何做呢?
我们可以通过另一个属性$slots
,这个属性表示父组件所传入插槽的对象。每一个插槽都在$slots
上暴露为一个函数,返回一个 vnode 数组,同时 key 名对应着插槽名。 那我们就可以遍历$slots
动态绑定到el-input
组件上,就可以解决绑定插槽这方面的问题了。
vue
<template>
<el-input ref="refInput" v-bind="$attrs">
<template v-for="(value, name) in $slots" #[name]>
<slot :name="name" />
</template>
</el-input>
</template>
<script>
export default {
}
</script>
但如果再考虑得深一点,你会发现有的时候这个组件会向这个插槽传递一些数据,就是作用域插槽了。
vue
<template>
<el-input ref="refInput" v-bind="$attrs">
<template v-for="(_value, name) in $slots" #[name]="slotData">
<slot :name="name" v-bind="slotData || {}" />
</template>
</el-input>
</template>
<script>
export default {
}
</script>
第三方面: ref
我们使用组件的时候保不齐就会使用ref
调用组件里面暴露的方法。我们可以通过这么几种方式实现:
- 暴露
el-input
的ref
,然后通过this.$ref[二次封装组件的ref][el-input的ref].focus()
的方式调用。 - 在组件内重新写
el-input
的方法并绑定到el-input
组件上,然后暴露出去。
以上这两种方式都可以是现实,但是我们实际开发过程中如果组件被修改了,那所有使用该组件的地方都需要进行调整,而且咱们都不希望写这么多无聊的代码。就出现了以下主要介绍方式:
我们换一种思路,我们要做的无非就是将el-input
的方法提取到我们封装的组件上暴露给使用组件的地方使用。那我们就可以将el-input
的方法通过ref
的方式获取到然后放到封装组件的实例里面去。
在进行组合式API封装前先介绍一个属性expose
,用于声明当组件实例被父组件通过模板引用访问时暴露的公共属性。默认情况下,当通过 $parent
、$root
或模板引用访问时,组件实例将向父组件暴露所有的实例属性。
选项式
vue
<template>
<el-input ref="refInput" v-bind="$attrs">
<template v-for="(_value, name) in $slots" #[name]="slotData">
<slot :name="name" v-bind="slotData || {}" />
</template>
</el-input>
</template>
<script>
export default {
data() {
return {}
},
mounted() {
const entries = Object.entries(this.$refs.refInput)
for(const [key, value] of entries) {
this[key] = value
}
}
}
</script>
组合式
在组合式setup
函数中我们需要先通过getCurrentInstance
方法获取当前组件实例,然后将提取el-input
组件暴露的方法暴露出去。需要注意的是我们在使用setup
方法的时候会在最后将需要使用到的属性或者方法return
出去使用。但是在setup
函数它在beforeCreate
之前发生,所以我们获取不到el-input
组件的实例,所以就需要在onMounted
的时候将el-input
组件暴露的方法加到当前组件实例的expose
属性中,但是没有主动声明暴露的时候expose
属性是null
,所以我们需要先主动声明暴露,在onMounted
的时候将el-input
组件暴露的方法添加到expose
中。
vue
<template>
<el-input ref="refInput" v-bind="$attrs">
<template v-for="(_value, name) in $slots" #[name]="slotData">
<slot :name="name" v-bind="slotData || {}" />
</template>
</el-input>
</template>
<script>
import { ref, onMounted, getCurrentInstance } from 'vue'
export default {
setup(props, context) {
const instance = getCurrentInstance()
const refInput = ref()
onMounted(() => {
const entries = Object.entries(refInput.value.$.exposed)
for (const [key, value] of entries) {
instance.exposed[key] = value
}
})
context.expose()
return {
refInput
}
}
}
</script>
setup标签
setup标签
写法与组合式封装方法相似。不同的是在setup标签
中当前组件实例的expose
不为null
,所以不需要主动声明暴露。
vue
<template>
<el-input ref="refInput" v-bind="$attrs">
<template v-for="(_value, name) in $slots" #[name]="slotData">
<slot :name="name" v-bind="slotData || {}" />
</template>
</el-input>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
const refInput = ref()
onMounted(() => {
const entries = Object.entries(refInput.value.$.exposed)
for (const [key, value] of entries) {
instance.exposed[key] = value
}
})
</script>
以上就是Vue3组件二次封装的内容,附上源码。
感谢看官看到这里,如果觉得文章不错的话,可以给小生的几个开源项目点个Star⭐!
- 基于 Vue3 + Element-plus 管理后台基础功能框架
- 基于 Vue3 + Element-plus + websocket 即时聊天系统
- 基于 node 开发的后端服务:github.com/gmingchen/n...