UI 组件的二次封装

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 方法:

以此实现,父组件调用子组件的方法。 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/57340.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ELK + Filebeat + Spring Boot:日志分析入门与实践(二)

目录 一、环境 1.1 ELKF环境 1.2 版本 1.3 流程 二、Filebeat安装 2.1 安装 2.2 新增配置采集日志 三、logstash 配置 3.1 配置输出日志到es 3.2 Grok 日志格式解析 3.2 启动 logstash ​3.3 启动项目查看索引 一、环境 1.1 ELKF环境 springboot项目&#xff1a;w…

二百七十、Kettle——ClickHouse中增量导入清洗数据错误表

一、目的 比如原始数据100条&#xff0c;清洗后&#xff0c;90条正确数据在DWD层清洗表&#xff0c;10条错误数据在DWD层清洗数据错误表&#xff0c;所以清洗数据错误表任务一定要放在清洗表任务之后。 更关键的是&#xff0c;Hive中原本的SQL语句&#xff0c;放在ClickHouse…

一篇文章入门梅尔频率倒谱系数

文章目录 梅尔频率倒谱系数MFCC预处理预加重分帧加窗 FFT&#xff08;Fourier-Transform&#xff09;功率谱滤波器组梅尔频率倒谱系数&#xff08;MFCC&#xff09;均值归一化总结 参考文献 梅尔频率倒谱系数MFCC 梅尔倒谱系数&#xff08;Mel-scale FrequencyCepstral Coeffi…

Qt的信号槽机制学习一

一、Qt理论知识简记 &#xff08;一&#xff09;信号与槽[1] 信号与槽是Qt编程的基础&#xff0c;其使得处理界面上各个组件的交互操作变得比较直观和简单&#xff0c;GUI&#xff08;Graphical User Interface&#xff09;程序设计的主要工作就是对界面上各组件的信号进行相应…

程序员的相亲囧途:三万相亲费,能否换回真爱?

在快节奏的都市生活中&#xff0c;相亲已成为不少单身男女寻找另一半的重要途径。然而&#xff0c;宁波的唐先生却在这条路上遭遇了不小的挫折。28岁的他&#xff0c;身高1米78&#xff0c;本应是相亲市场上的“香饽饽”&#xff0c;却在“我主良缘”交了三万块钱相亲费后&…

【Android】使用TextView实现按钮开关代替Switch开关

介绍 Android 本身自己带的有开关控件&#xff0c;但是很多时候我们是不愿意使用这种开关的&#xff0c;感觉使用起来比较麻烦&#xff0c;特别是遇到需要延迟操作的情况。 比如有一个需求是这样的&#xff1a;我们需要打开一个设置&#xff0c;但是这个设置是否打开需要经过…

AI自媒体变现路径大盘点!建议收藏!

当下的我做为一人公司或者超级个体为目标的创业模式&#xff0c;无论是在写作、图文和短视频输出方面&#xff0c;我都是运用了N个AI工具来提升我的生产力。 这种创业模式就是一个人N个AI的模式&#xff0c;我们可以通过AI工具做提效来赚取差价&#xff0c;以时间复利来累计财…

Python的协程与传统的线程相比,是否能更有效地利用计算资源?在多大程度上,这种效率是可测量的?如何量化Python协程的优势|协程|线程|性能优化

目录 1. 协程与线程的基本概念 1.1 线程 1.2 协程 2. 协程的实现原理 2.1 基本示例 3. 协程与线程的效率对比 3.1 资源利用率 3.2 性能测试 4. 使用场景分析 4.1 适用场景 4.2 不适用场景 5. 性能监测与测量 5.1 使用时间记录 5.2 使用第三方库 6. 总结与展望 P…

服务器文件访问协议

服务器文件访问协议 摘要NFS、CIFS、SMB概述SMBWindows SMBLinux SambaPython SMB NFS 摘要 本篇博客参考网上文档和博客&#xff0c;对基于网络的服务器/主机的文件访问、共享协议进行简要总结&#xff0c;完整内容将会不断更新&#xff0c;以便加深理解和记忆 NFS、CIFS、S…

docker占用磁盘过多问题

我在windows系统上用docker&#xff0c;安装在C盘环境下&#xff0c;我发现C盘占用了大量的空间&#xff0c;查找后发现是docker的映像文件占用的&#xff0c;于是开始清理&#xff0c;中间还踩个坑&#xff0c;记录一下&#xff0c;下次需要的时候方便找。 踩坑 我本想移动映…

HarmonyOS:@Watch装饰器:状态变量更改通知

Watch应用于对状态变量的监听。如果开发者需要关注某个状态变量的值是否改变&#xff0c;可以使用Watch为状态变量设置回调函数。 说明 从API version 9开始&#xff0c;该装饰器支持在ArkTS卡片中使用。 从API version 11开始&#xff0c;该装饰器支持在元服务中使用。 一、概…

【Qt】控件——布局管理器、常见的布局管理器、布局管理器的使用、垂直布局、水平布局、网格布局、表单布局、Spacer

文章目录 Qt布局管理器垂直布局水平布局网格布局表单布局Spacer Qt 布局管理器 之前在使用 Qt 创建界面上的控件时&#xff0c;大多是通过 “绝对定位” 的方式来设定的。即每个控件所在的位置都需要计算坐标&#xff0c;最终通过 setGeometry 或者 move 方式进行摆放。 然而&a…

配置和排查 Lombok 在 IDEA 中使用的详细步骤

在日常开发中&#xff0c;Java 代码常常需要大量的样板代码&#xff0c;比如 getter、setter、toString 等方法。Lombok 是一个 Java 库&#xff0c;可以通过注解的方式&#xff0c;自动生成这些常见的代码&#xff0c;从而让代码更加简洁、清晰。比如&#xff0c;我们可以通过…

快速在win11上利用hyper-v安装虚拟系统:遭遇Start PXE over ipv4

以前习惯使用VMware&#xff0c;但在win11上折腾了很久都遇到各种麻烦&#xff0c;索性就上微软自家的Hyper-V&#xff0c;。作为微软自家的产品&#xff0c;Hyper-V 与 Windows 11 操作系统紧密结合&#xff0c;具有良好的兼容性和稳定性。在安装和使用过程中&#xff0c;与系…

Python中的数据可视化:Matplotlib基础与高级技巧

Python中的数据可视化&#xff1a;Matplotlib基础与高级技巧 数据可视化是数据分析和数据科学中不可或缺的一部分。通过图表&#xff0c;我们可以更直观地观察数据的分布和趋势。Matplotlib作为Python最基础、也是最广泛使用的绘图库之一&#xff0c;不仅支持多种常用图表&…

沈阳乐晟睿浩科技有限公司抖音小店新篇章

在当今数字化时代&#xff0c;电商行业如雨后春笋般迅速崛起&#xff0c;其中抖音小店凭借其庞大的用户基础、精准的推荐算法和便捷的购物体验&#xff0c;成为了电商领域的新宠。在这场电商变革中&#xff0c;沈阳乐晟睿浩科技有限公司&#xff08;以下简称“乐晟睿浩”&#…

1,国产FPGA(紫光同创)-IP核-PLL

本文默认在0&#xff0c;国产FPGA&#xff08;紫光同创&#xff09;-新建PDS工程基础上完成。 1&#xff0c;添加IP核 右击&#xff08;1&#xff09;空白处进行添加&#xff0c;点击New IP&#xff08;2&#xff09;进行新建IP核。 选择本次实验要配置的IP核-PLL&#xff08;…

“智能二维码”实现光伏行业数字信息化管理

近日&#xff0c;为了提升管理效率&#xff0c;国电投建业光伏电站将二维码引入设备巡视和班组建设中。 首先&#xff0c;使用传统纸质巡视作业卡&#xff0c;巡视工作强度大&#xff0c;容易出现错误&#xff1b;此外&#xff0c;“三会一活动”和培训记录等班组建设过程材料大…

电脑录屏不用愁!四款免费录屏软件深度体验分享

虽然我不是专业的&#xff0c;但是我有一颗想要变得专业的心。作为一名经常需要录制教学视频和游戏直播的博主&#xff0c;我深知一款好用的录屏软件对于工作效率的重要性。今天&#xff0c;我就来和大家分享一下我最近亲测的四款免费录屏软件&#xff0c;来看看哪一款更适合你…

shodan5,参数使用,批量查找Mongodb未授权登录,jenkins批量挖掘

查找美国安全局漏洞 nww.nsa.gov&#xff08;美国安全局官方网站) net参数使用 搜索指定的ip网段 shodan search --limit 10 --fields ip_str,port net:208.88.84.0/24 (老美国家安全局的一个网段)可能直接访问不太行&#xff0c;可以使用host参数&#xff0c;得到域名再去…