脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue组件二次封装

Vue组件二次封装的一些实用技巧总结

 更新时间：2022年04月29日 10:57:48   作者：口水鱼  
我们在做项目经常会遇到组件功能不能满足业务需求的时候,这时候需要在原有的组件上进行二次封装,下面这篇文章主要给大家介绍了关于Vue组件二次封装的一些实用技巧,需要的朋友可以参考下

前言

在开发Vue项目我们一般使用第三方UI组件库进行开发，如element-plus, @arco-design/web-Vue, naive-ui等, 但是这些组件提供的接口并不一定满足我们的需求，这时我们可以通过对组件库组件的二次封装，来满足我们特殊的需求。

对于封装组件有一个大原则就是我们应该尽量保持原有组件的接口，除了我们需要封装的功能外，我们不应该改变原有组件的接口，即保持原有组件提供的接口如props,events,slots等不变。

为了实现这一原则我们就需要将新组件的接口与旧组件的接口一一对应, 当然我们可以通过在新组件中一一声明对应的接口来实现（或者只实现我们目前需要用到的接口）但这种办法虽然简单但看起来却极其很繁琐, 有没有一种方法可以实现props,events,slots的自动透传呢？

透传 Attribute

我们可以使用一个没有参数的 v-bind来实现props,events的透传， 它会将一个对象的所有属性都作为 attribute 应用到目标元素或组件上, 这在官方文档中有着详细介绍。

<BaseButton v-bind="$attrs"/>

其中$attrs包含组件可以透传属性的对象, 透传属性包括props,events, class,style,id等。(不包含接收组件显式声明的 props、emits以及slots )

如下,是一个封装el-input的默认可清空的的组件，由于我们已经在defineProps声明过clearable, 所以此时我们需要显性传递clearable属性

<template>
  <div class="my-input">
    {{ label }}
    <el-input v-bind="$attrs" :clearable="clearable"></el-input>
  </div>
</template>

<script setup>
defineProps({
  label: String,
  clearable: {
    type: Boolean,
    default: true,
  },
});
</script>

如果我们不希望透传某些属性比如class, 我们可以通过useAttrs来实现

<template>
  <div class="my-input">
    {{ label }}
    <el-input v-bind="filteredAttrs" :clearable="clearable"></el-input>
  </div>
</template>

<script setup>
import { computed, useAttrs } from 'Vue';

defineProps({
  label: String,
  clearable: {
    type: Boolean,
    default: true,
  },
});

const attrs = useAttrs();
const filteredAttrs = computed(() => {
  return { ...attrs, class: undefined };
});
</script>

上述封装的组件还有个缺点, 就是我们将无法使用el-input本身提供的slot,下面我们就来实现一个可以透传 slot的组件

透传 slot

slot可以通过下面这种方式透传的

<!-- 在组件中创建新的对应名称的插槽 -->
<template #slotName>
<!-- 在插槽内部使用对应名称的插槽 -->
    <slot name="slotName" />
</template>

普通slot

如果透传的slot比较少，我们可以通过在封装组件内部定义并使用插槽<template v-slot:slotName><slot name="slotName" /></template>来透传插槽

<template #slotName>
    <slot name="slotName" />
</template>

动态插槽名

如果需要透传的slot不固定或者较多，我们可以通过动态插槽名称透传

<template #[slotName] v-for="(slot, slotName) in $slots" >
    <slot :name="slotName" />
</template>

如下是一个透传的slot的el-input组件

<template>
  <div class="my-input">
    {{ label }}
    <el-input v-bind="$attrs" :clearable="clearable">
      <template #[slotName] v-for="(slot, slotName) in $slots">
          <slot :name="slotName" />
      </template>
    </el-input>
  </div>
</template>

<script setup>
defineProps({
  label: String,
  clearable: {
    type: Boolean,
    default: true,
  },
});
</script>

作用域插槽

如果需要封装组件使用了作用域插槽，我们可以通过<template v-slot:slotName="slotProps"><slot name="slotName" v-bind="slotProps"/></template>来透传作用域插槽插槽。

<template #[slotName]="slotProps" v-for="(slot, slotName) in $slots" >
    <slot :name="slotName" v-bind="slotProps"/>
</template>

封装组件存在的问题

组件实例属性和方法的调用

封装后的组件我们无法按照之前的情况调用组件实例中的属性和方法，比如BaseButton有focus方法,在封装之前我们可以通过下面这种方式调用

// 调用BaseButton的组件父组件
// <BaseButton ref="button">
const button = ref();
button.value.focus()

对于封装后的组件，由于此时button指向我们的MyButton,并不指向BaseButton的实例，所以我们需要在包装的组件中声明并暴露BaseButton事例

//我们封装的组件
// MyButton.Vue
// <BaseButton ref="button">
const button = ref();

注意如果我们使用 <script setup>，是没办法访问实例中的属性的，详情参考vuejs.org/api/sfc-scr…

此时可以通过defineExpose显式公开ref属性

// 我们封装的组件
// MyButton.Vue
// <BaseButton ref="button">
const button = ref();
defineExpose({
  button
});

然后在父组件中我就可以通过实例链式调用封装的组件了

// <MyButton ref="button">
const button = ref();
button.value.button.focus()

总结

到此这篇关于Vue组件二次封装的一些实用技巧的文章就介绍到这了,更多相关Vue组件二次封装内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue slots 组件的组合/分发实例

    vue slots 组件的组合/分发实例

    今天小编就为大家分享一篇vue slots 组件的组合/分发实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Element UI框架中巧用树选择器的实现

    Element UI框架中巧用树选择器的实现

    这篇文章主要介绍了Element UI框架中巧用树选择器的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 图片预览插件vue-photo-preview的使用示例详解

    图片预览插件vue-photo-preview的使用示例详解

    这篇文章主要介绍了图片预览插件vue-photo-preview的使用,本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-08-08
  • Vue3实现获取验证码按钮倒计时效果

    Vue3实现获取验证码按钮倒计时效果

    这篇文章主要介绍了Vue3实现获取验证码按钮倒计时效果,用户点击获取验证码按钮,发送请求给后端,按钮失效,并且开始倒计时60秒；在此期间,用户无法再次点击按钮,即使用户刷新页面,倒计时依然存在,直到倒计时完毕,按钮恢复,感兴趣的小伙伴跟着小编一起来看看吧
    2024-10-10
  • Vue实现滚动加载更多效果的示例代码

    Vue实现滚动加载更多效果的示例代码

    这篇文章介绍了在 Web 应用中处理大量数据展示的两种滚动加载更多方案,滚动加载更多通过分页工作,优点是实现简单、用户体验流畅,缺点是内存占用可能过高,虚拟列表只渲染视口内容,性能好但实现复杂,本文介绍了Vue实现滚动加载更多效果,需要的朋友可以参考下
    2024-12-12
  • Vue3项目中配置TypeScript和JavaScript的兼容

    Vue3项目中配置TypeScript和JavaScript的兼容

    在Vue3开发中,常见的使用JavaScript（JS）编写代码,但也会有调整编写语言使用TypeScript（TS）的需求,因此,在Vue3项目设置中兼容TS和JS是刻不容缓的重要任务,
    2023-08-08
  • vue视图响应式更新详细介绍

    vue视图响应式更新详细介绍

    这篇文章主要介绍了Vue响应式原理，响应式就是当对象本身（对象的增删值）或者对象属性（重新赋值）发生了改变的时候，就会运行一些函数，最常见的示render函数
    2022-09-09
  • Vue生命周期示例详解

    Vue生命周期示例详解

    这篇文章主要为大家详细介绍了Vue生命周期的示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-04-04
  • Vue网络请求的三种实现方式介绍

    Vue网络请求的三种实现方式介绍

    这篇文章主要介绍了Vue网络请求的三种实现方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-09-09
  • vue项目中微信登录的实现操作

    vue项目中微信登录的实现操作

    这篇文章主要介绍了vue项目中微信登录的实现操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-09-09

最新评论