基于Vue3的组件封装技巧分享

server/2024/12/15 21:26:28/

1、需求说明
需求背景:日常开发中,我们经常会使用一些UI组件库诸如and design vue、element plus等辅助开发,提升效率。有时我们需要进行个性化封装,以满足在项目中大量使用的需求。
错误示范:基于a-modal封装一个自定义Modal组件:修改modal样式,按钮样式、每次关闭后销毁、渲染到指定元素上等等,后续项目的弹窗全部基于该自定义组件。

javascript"><template><div ref="myModal" class="custom-modal"></div><a-modalv-model:visible="visible"centereddestroyOnClose:getContainer="() => $refs.myModal"@ok="handleOk"@cancel="handleCancel":style="{ width: '560px', ...style }":cancelText="cancelText":okText="okText"><!-- 以上皆为该组件的默认属性 --><slot></slot></a-modal>
</template><script setup>
const props = defineProps({title: {type: String,default: "",},style: {type: Object,default: () => ({}),},cancelText: {type: String,default: "取消",},okText: {type: String,default: "确定",},
});
const emits = defineEmits(["handleOk", "handleCancel"]);
const visible = ref(false);const handleOk = () => {emits("handleOk");
};
const handleCancel = () => {emits("handleCancel");
};
defineExpose({ visible });
</script><style lang="less" scoped>
.custom-modal {:deep(.ant-modal) {//省略几百行样式代码}
}
</style>

代码封装完成,于是乎我们便能在项目中应用带有项目风格的弹窗

javascript"><CustomModal ref="xxxModal" title="xxx" @ok="onXxx" @cancel="onXxx" >content</CustomModal>

2、$attrs
问题来了:一切看起来都挺正常。直到有一天同事说:我想要去掉右上角的关闭按钮,能改成自定义的吗简单,直接加!

javascript"> <!-- 省略不相关代码 -->
<a-modal :closable="closable"></a-modal>
<script setup>
const props = defineProps({//...closable:{type: Boolean,default: false}
});
</script>

另一位同事说:我不想让它是居中的,能改成自定义的吗,还有一位同事说…思考:这样的情况多了,就有点难顶。每次一有新的需求,我就得改这个组件,导致这个组件代码越来越冗余。那么是否有一种方式能够将传进来的属性自动绑定给a-modal呢,有,那就是attrs

javascript">注意:
1.vue提供了$attrs这么一个属性用于接收父组件传递下来的属性,$attrs不包括已经写入props的值
2.如果父组件传递了style,class,那么这这些值不仅会存在于$attrs,还会默认绑定至根元素上。这一点需要注意
javascript"><modalTest :footer="null" :centered="false" :zIndex="999" />
//此时的$attrs
{ "footer": null, "centered": false, "zIndex": 999 }

有了这个组件实例,结合v-bind我们就可以这么写

javascript"> <a-modalv-model:visible="visible"centereddestroyOnClose:getContainer="() => $refs.myModal":style="{ width: '560px', ...style }"v-bind="$attrs"><!----></a-modal>

这样一来,我们就可以使用a-modal提供的任意属性和方法了

3、$slots
问题来了:插槽怎么办,例如a-modal就提供了许多插槽,是不是要用哪个就先在自定义组件上写好呢
错误示例:

javascript"><a-modal><!-- default --><slot></slot><!-- title --><template #title>
<slot name="title">{{ title }}</slot></template><!-- other -->
</a-modal>

弊端就像之前的,如果该原生提供了许多插槽,当有需要时岂不是频繁去修改自定义组件添加相应的插槽其实利用$slots可以解决这个问题
官网的这段话简明扼要的说出的插槽的原理,我们所传递的插槽最终都是变成

javascript">{'slotName':fn(...args)  //fn返回一个虚拟DOM'defautl': fn(...args) //默认插槽
}

也就是我们传什么插槽进来, s l o t s 就有什么值那么我们可以遍历 slots就有什么值那么我们可以遍历 slots就有什么值那么我们可以遍历slots中的值,有什么插槽我们便动态绑定什么插槽

javascript"><a-modal><template v-for="(_val, name) in $slots" #[name]="options"><slot :name="name" v-bind="options || {}"> </slot></template>
</a-modal>

#[name]=“options”,我们可以拿到原生a-modal在name这个插槽中传递来的一些状态options,并绑定在上。详情请查看官网:作用域插槽[1]。

这样一来,我们原生a-modal怎么使用插槽,自定义组件就怎么使用插槽

javascript"><CustomModal><template #title="{arg1, arg2}">content</template>
</CustomModal>

至此,封装的代码如下

javascript"><template><div ref="myModal" class="custom-modal"></div><a-modalv-model:visible="visible"centered:getContainer="() => $refs.myModal":style="{ width: '560px'}"destroyOnClosev-bind="$attrs"><template v-for="(_val, name) in $slots" #[name]="ops"><slot :name="name" v-bind="ops || {}"> </slot></template></a-modal>
</template><script setup>
const visible = ref(false);
defineExpose({ visible });
</script><style lang="less" scoped>
.custom-modal {//style
}
</style>

还有许多优化的空间,例如当前父组件显隐该Modal需使用ref的方式访问visible。在vue3中也可以参考官网的做法这样子写

javascript"><template><div ref="myModal" class="custom-modal"></div><a-modal:visible="visible"//....v-bind="$attrs"><!-- ...  --></a-modal>
</template><script setup>
defineProps(['visible'])
const emit = defineEmits(); // 不用写"update:visible",vue会自动加上
watch(() => props.visible,(newVal) => emit("update:visible", newVal);
);
</script>

那么使用这个控制这个组件的显示隐藏就方便许多了

javascript"><CustomModal v-model:visible="visible"></CustomModal>

本文中的封装方式是基于vue3来进行实现,不局限在什么UI组件身上。如果使用的是vue2,情况稍有不同,请自行了解。


http://www.ppmy.cn/server/150446.html

相关文章

webstorm开发uniapp(从安装到项目运行)

1、下载uniapp插件 下载连接&#xff1a;Uniapp Tool - IntelliJ IDEs Plugin | Marketplace &#xff08;结合自己的webstorm版本下载&#xff0c;不然解析不了&#xff09; 将下载到的zip文件防在webstorm安装路径下&#xff0c;本文的地址为&#xff1a; 2、安装uniapp插…

Spring Boot集成Knife4j文档工具

Knife4j 搭建 Knife4j环境的的搭建和Swagger一样都比较简单&#xff0c;只需要极简的配置即可。 maven依赖 我使用的是较高版本的基于openapi规范的依赖包&#xff0c;OpenAPI2(Swagger)规范是Knife4j之前一直提供支持的版本&#xff0c;底层依赖框架为Springfox。 此次在4…

DETR: End-to-End Object Detection with Transformers论文学习

论文地址&#xff1a;https://arxiv.org/pdf/2005.12872 代码地址&#xff1a;https://github.com/facebookresearch/detr 相关学习视频&#xff1a;https://space.bilibili.com/94779326/lists?sid1531941 标题前言&#xff1a; DETR 是 Facebook 团队于 2020 年提出的基于…

控制反转IoC

什么是控制反转&#xff1f; 控制反转&#xff1a;IoC&#xff08;Inversion of Control&#xff09;&#xff0c;是一种编程思想。或者叫做一种新型的设计模式。由于出现的比较新&#xff0c;没有被纳入GoF23种设计模式范围内。 反转是什么呢&#xff1f; 反转的是两件事&a…

呼叫中心大模型呼入机器人详解(转)

呼叫中心大模型呼入机器人详解(转) 原作者&#xff1a;开源呼叫中心FreeIPCC&#xff0c;其Github&#xff1a;https://github.com/lihaiya/freeipcc 呼叫中心大模型呼入机器人是一种基于大规模深度学习模型构建的智能化系统&#xff0c;它能够处理海量数据并学习其中的规律&…

开源分布式系统追踪-01-Zipkin-01-入门介绍

分布式跟踪系列 CAT cat monitor 分布式监控 CAT-是什么&#xff1f; cat monitor-02-分布式监控 CAT埋点 cat monitor-03-深度剖析开源分布式监控CAT cat monitor-04-cat 服务端部署实战 cat monitor-05-cat 客户端集成实战 cat monitor-06-cat 消息存储 skywalking …

YZ系列工具之YZ11:VBA_窗体缩放

我给VBA下的定义&#xff1a;VBA是个人小型自动化处理的有效工具。利用好了&#xff0c;可以大大提高自己的工作效率&#xff0c;而且可以提高数据的准确度。我的教程一共九套一部VBA手册&#xff0c;教程分为初级、中级、高级三大部分。是对VBA的系统讲解&#xff0c;从简单的…

Vue八股青春版

前言&#xff1a;本文资料来自于web前端面试以及Vue的官方文档&#xff0c;对其中的信息做了更新和归纳。 对vue的理解 一、从历史说起 纯前端&#xff08;静态&#xff09;ASP和JSP &#xff08;JavaHTML&#xff09;&#xff0c;不太灵活&#xff0c;服务端渲染JquerySPA …