浅析vue3中组件的二次封装

更新时间：2023年09月15日 11:33:34 作者：拖孩

在实际开发中每个开发者应该都有经历过对组件进行二次封装,本文将从三个方面来基于 Element UI 的el-input组件简单实现一下组件的二次封装,有需要的可以参考下

背景

在实际开发中每个开发者应该都有经历过对组件进行二次封装，在进行封装的时候需要保留组件已有的功能，这时需要重写组件方法，当组件已有大量功能时候，则需要重写很多重复代码。且组件功能进行修改的时候，封装的组件也需要对应修改，从而造成许多开发和维护成本。下面将从三个方面来基于 Element UI 的el-input组件简单实现一下组件的二次封装。

第一方面：属性绑定

在对组件封装的时候首先会遇到就是绑定属性了，简单说就是将二次封装的组件属性绑定到el-input组件上。可能有些小伙伴做的时候会将el-input的属性全部写到封装组件 props 里面，然后再将这些属性绑定到el-input组件上。这样做不是不行，但是太鸡肋了，而且浪费时间。那该如何做呢？

在 vue 实例中有一个属性$attrs，这个属性包含了组件所有透传attributes的对象。是指由父组件传入，且没有被子组件声明为 props 或是组件自定义事件的 attributes 和事件处理函数。那我们就可以直接将$attrs以v-bind动态绑定到el-input组件上，就可以解决属性绑定这方面的问题了。

<template>
  <el-input ref="refInput" v-bind="$attrs"></el-input>
</template>
<script>
export default {
}
</script>

第二方面：插槽

第二方面就是插槽的绑定了，可以和属性绑定一样，将所有的插槽全部写出来，然后再一个一个写到el-input组件上，如果插槽不多，也没有什么影响，但是如果插槽很多呢，如果二次封装的是有可能会修改的组件呢？那这个二次封装的组件也要同步修改，很麻烦！那又该如何做呢？

我们可以通过另一个属性$slots，这个属性表示父组件所传入插槽的对象。每一个插槽都在$slots上暴露为一个函数，返回一个 vnode 数组，同时 key 名对应着插槽名。那我们就可以遍历$slots动态绑定到el-input组件上，就可以解决绑定插槽这方面的问题了。

<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>

但如果再考虑得深一点，你会发现有的时候这个组件会向这个插槽传递一些数据，就是作用域插槽了。

<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 或模板引用访问时，组件实例将向父组件暴露所有的实例属性。

选项式

<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中。

<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，所以不需要主动声明暴露。

<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中组件的二次封装的文章就介绍到这了,更多相关vue3组件封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue-cli webpack2项目打包优化分享
下面小编就为大家分享一篇vue-cli webpack2项目打包优化，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-02-02
Vue学习笔记之跨域的6种解决方案
在前后端分离项目中,跨域是一定会出现的问题,下面这篇文章主要给大家介绍了关于Vue学习笔记之跨域的6种解决方案,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-04-04
关于element ui 表格中的常见特殊属性说明
这篇文章主要介绍了关于element ui 表格中的常见特殊属性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-08-08
vue3如何优雅的实现移动端登录注册模块
这篇文章主要给大家介绍了关于vue3如何优雅的实现移动端登录注册模块的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
前端vue2使用国密SM4进行加密、解密具体方法
SM4是一种对称加密算法,类似于AES,主要用于数据的批量加密,如文件加密、数据库加密、网络通信数据加密等,这篇文章主要给大家介绍了关于前端vue2使用国密SM4进行加密、解密的相关资料,需要的朋友可以参考下
2024-07-07
vuex的数据渲染与修改浅析
这篇文章主要给大家介绍了关于vuex的数据渲染与修改的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-11-11
基于vue项目设置resolves.alias: ''@''路径并适配webstorm
这篇文章主要介绍了基于vue项目设置resolves.alias: '@'路径并适配webstorm,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-12-12
vue+vue-validator 表单验证功能的实现代码
这篇文章主要介绍了vue+vue-validator 表单验证功能的实现代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2017-11-11
Vue实现二维码数组的全选与反选功能
在开发Web应用程序时,表格数据的展示和操作是非常常见的需求之一,特别是在处理表格中的复选框选择时,我们经常需要实现全选、反选等功能,这篇文章将带你深入了解如何在Vue.js中实现对二维数组数据的全选和反选功能,需要的朋友可以参考下
2024-09-09
vue3响应式Object代理对象的读取示例详解
这篇文章主要为大家介绍了vue3响应式Object代理对象的读取示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-08-08