vue如何封装一个高质量的表单通用组件

这篇“vue如何封装一个高质量的表单通用组件”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue如何封装一个高质量的表单通用组件”文章吧。

特性复用：必须继承原有组件的所有特性。

命名规范：二次组件名必须见名知意，我们一般都是起一个公用名+原有组件名，比如lib-form。

接口简单：自定义暴露出来的接口越简单越好。

容易拓展：留有自定义插槽，让用户可以自己选择。

功能完善：具备更完善的功能如：表单验证、动态删减表单，集成第三方的插件（富文本）...

场景通用：具备多个场景使用，比如弹框嵌套表单、页面嵌套表单。

封装一个高质量的通用组件，上面是真的只是基操，话不多说，直接上实践手把手教你封装组件。

继承原有组件的所有特性（这也是封装的核心）。先明确三个大方向：

表单固定属性，继承Form表单的所有属性、方法。

表单项固定属性，继承表单项的所有属性、方法。

由于Element-plus组件都是以el-为前缀，所以type取值只需要取el-后面部分作为值就行，比如el-input取 'input' 为值。

表单验证效果，继承组件原有的所有验证属性。由于Element-plus的验证都是使用 async-validator 这个插件的验证方法，直接复用插件源码路径async-validator/src/interface.ts文件下的所有代码：

实现一个完善的通用组件封装，通过对标签封装、接口 暴露、开发者传参等。明确表单类型，根据不同类型表单复用多种场景，不仅开发者用户拓展，而且，让开发者用最少代码就可以复用：

普通表单项封装，比如日期、输入等组件。

嵌套表单项封装，比如下拉框，除了select组件还嵌套option组件。

本文使用的是wangEditor。

向开发者暴露上传的核心方法：预览、删除、上传成功等，同时允许开发者自定义上传信息以及渲染区域等。

有时业务需要，一行可以定义多个表单，所以需要使用el-row，此时需要修改FormOptions属性接口，完善多个表单场景，cols是一个数组定义FormOptions数组，colOption是el-col组件的相关属性，然后重新复用嵌套表单的代码。

自定义插槽：开发者可以根据需要，在封装的el-form中添加插槽，可以允许组件功能的拓展，我们可以根据自己需要进行封装，这里就不一一演示了。

提交取消按钮区域：这个最好可以实现插槽让开发者可以自定义。

开发者的调用封装组件，通过配置不同表单类型的数组，然后调用lib-form封装组件实现业务代码复用。

组件的调用：根据业务需要，可以适当定义我们需要的组件属性以及必须要传的参数。

表单项的配置数组：由于这配置数组比较长，所以一般可以单独抽离出来，不要写在vue文件中，这样可以提高代码的可读性。

以上就是关于“vue如何封装一个高质量的表单通用组件”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：[email protected]进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。