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

主要观点总结

文章介绍了一种在Vue3中基于常见的UI组件库进行二次封装的方法，旨在追求更好的个性化和灵活性。它使用$attrs和$slots来处理组件的属性传递和插槽内容，并提供了具体示例代码。同时，文章还讨论了封装过程中可能遇到的问题，如如何动态绑定插槽，以及如何利用$attrs自动绑定属性。此外，文章还介绍了如何控制组件的显示和隐藏，以及如何通过动态绑定属性来实现更多的自定义选项。

关键观点总结

关键观点1: Vue3组件二次封装

文章介绍了在Vue3中基于常见UI组件库进行二次封装的方法，通过$attrs和$slots处理属性和插槽，以实现更好的个性化和灵活性。

关键观点2: 动态绑定插槽

文章讨论了如何通过遍历$slots中的值来动态绑定插槽，以支持原生组件的任意插槽。

关键观点3: 利用$attrs自动绑定属性

介绍了如何利用$attrs自动绑定传入的属性，以减少冗余代码。

关键观点4: 控制组件的显示和隐藏

讨论了如何控制组件的显示和隐藏，以及如何通过动态绑定属性来实现更多的自定义选项。

文章预览

点击上方  程序员成长指北 ，关注公众号 回复 1 ，加入高级Node交流群 本文在Vue3的基础上针对一些常见UI组件库组件进行二次封装，旨在追求更好的个性化，更灵活的拓展，提供一些个人的思路见解，如有不妥之处，敬请指出。核心知识点 $attrs , $slots 1、需求说明 需求背景 ：日常开发中，我们经常会使用一些UI组件库 诸如and design vue、element plus等 辅助开发，提升效率。有时我们需要进行个性化封装，以满足在项目中大量使用的需求。 错误示范 ：基于 a-modal 封装一个自定义Modal组件： 修改modal样式，按钮样式、每次关闭后销毁、渲染到指定元素上等等 ，后续项目的弹窗全部基于该自定义组件。      < div   ref = "myModal"   class = "custom-modal" > div >      < a-modal          v-model:visible = "visible"          centered          destroyOnClose         ………………………………