组件库实战 教你如何设计Web世界中的表单验证

})
inputRef.error = !allPassed
}
}
return {
inputRef,
validateInput,
updateValue
}
}
})

接下来，我们在 `App.vue` 中对其进行使用，**具体代码如下：**

邮箱地址 {{emailVal}}

现在，我们来看下数据的值是否成功被绑定。**具体效果如下：**


![v-model绑定值](https://img-blog.csdnimg.cn/84c609408fb64c6f8d062833bff321fe.gif#pic_center)


大家可以看到，数据已经直接的被父组件给获取到并且也成功的绑定了。


### 5. 使用$attrs支持默认属性


上面我们基本上完成了整个组件的基本功能，现在，我们要来给它设置默认属性，也就是平常我们使用的 `placeholder` 。如果我们直接在 `<validate-input />` 组件中绑定 `placeholder` ，那么默认地，会直接绑定到它的**父组件**上面去。因此呢，我们要禁止掉这种行为，让绑定后的 `placeholder` 给相应的放置在 `input` 元素上。


那这一块内容呢，涉及到的就是 `vue3` 的 `$attrs` ， `$attrs` 可以让组件的根元素不继承 `attribute` ，并且可以手动决定这些 `attribute` 赋予给哪个元素。具体可查看官方文档：[禁用 Attribute 继承](https://bbs.csdn.net/topics/618317507)


下面，我们来实现这一块的功能。


首先是子组件 `ValidateInput.vue` ，**具体代码如下：**

之后是父组件 `App.vue` ，**具体代码如下：**

邮箱地址

密码

从上面的代码中我们可以了解到，通过 `inheritAttrs: false` 和 `$attrs` ，实现了我们想要的效果。


我们现在来看下浏览器的**显示结果：**


![使用$sttrs支持默认属性](https://img-blog.csdnimg.cn/dc0ad9b90bcb45bd9103a8cb49fbeade.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pif5pyf5LiA56CU56m25a6k,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)


## 💭二、验证表单ValidateForm


### 1. 组件需求分析


`ValidateInput` 除了基本的功能外，还可以进行功能扩散。比如，自定义校验、更多事件、更多不同的验证元素。


那么下面，我们要来设计整个**验证表单**，也就是 `ValidateForm` 组件，并且将 `ValidateInput` 给对应的使用到其中。


我们先来分析下这个 `ValidateForm` 都有哪些内容。**先看下图：**


![ValidateForm分析](https://img-blog.csdnimg.cn/9b55811c721346588a9dca1a85287f40.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5pif5pyf5LiA56CU56m25a6k,size_20,color_FFFFFF,t_70,g_se,x_16#pic_center)


先看**第一部分**，我们首先把前面我们封装的 `ValidateInput` 给放进去，进行语义化包裹。


**第二部分**，我们可以对提交的按钮进行自定义化，比如提交的文字是怎么样的，提交的按钮又是怎么样的。


**第三部分**，我们需要有一个确定的事件来触发最后的结果，那么我们就在 `ValidateForm` 中，获取最后的结果。


**第四部分**，算是一个隐藏功能，也是这个组件的一个难点，即获取每个 `ValidateForm` 包裹下的 `ValidateInput` 的验证结果。


ok，到这里，我们就简单的对 `ValidateForm` 进行一个分析，那么下面我们将一步步的来对其进行代码设计。


### 2. 使用插槽 slot


首先，我们要先将提交按钮，做成动态的。一开始初始化一个值，之后呢，可以**动态的改变按钮的文字和事件**。那这个要用到的就是 `vue` 的中**具名插槽** 。


我们先在 `vue3` 项目下的 `src|components` 定义一个子组件，命名为 `ValidateForm.vue` 。现在我们来设计它，**具体代码如下：**

继续，我们在 `App.vue` 中使用子组件 `ValidateForm.vue` 。**具体代码如下：**

对于以上代码，我们来做个简单的分析：


* 子组件通过 `emits` 来确定要发送给父组件的事件名称，之后呢，父组件通过 `@事件名称` 的方式来进行调用。
* 使用**具名插槽slot**，来对提交表单部分进行动态控制。子组件使用 `slot` 进行初始化，父组件使用 `template` 进行动态修改。


### 3. 父子组件通讯


上面我们解决了第 `1` 点，组件需求分析中的前三部分。那么现在，我们来看第四点，如何在 `ValidateForm` 中完成所有 `ValidateInput` 的验证。


我们先来完善父组件 `ValidateForm.vue` 的功能。**具体代码如下：**

在上面的代码中，我们使用 `mitt` 库创建了一个事件监听器 `emitter` ，供给它的子组件 `ValidateInput.vue` 使用。同时，创建了一个 `formSubmit` 事件，用于给它的父组件 `App.vue` 使用。


接着我们来完善子组件 `ValidateInput.vue` 的功能。**具体代码如下：**

有了 `emitter` 之后， `ValidateInput` 就在慢慢地把它的消息传去给它的老父亲，也就是 `ValidateForm` 。


最后，我们在 `App.vue` 中进行调用。**具体代码如下：**

这部分呢，我们成功调用了 `formSubmit` 事件，并将其进行监听。


好了，到此，我们的表单验证组件设计就完成啦！不知道大家是否对这种设计思想有了一个新的认识呢？


## 👁️‍🗨️四、结束语


在上面的文章中，我们讲到了 `Web` 世界中的表单元素。从验证输入框 `ValidateInut` 的抽象验证规则，对 `v-model` 进行重新设计，以及使用 `$attrs` 来支持默认属性。再到 `ValidateForm` 的使用具名插槽让提交按钮高度自定义化，再到最后的 `input` 之前的父子组件通讯。


整个过程细水长流，但也有很多新的设计思想值得我们去楷模和学习~


到这里，关于本文的讲解就结束啦~


如果您觉得这篇文章有帮助到您的的话不妨点赞支持一下哟~~😛


## 💯 往期推荐


👉[前端只是切图仔？来学学给开发人看的UI设计](https://bbs.csdn.net/topics/618317507)


👉[紧跟月影大佬的步伐，一起来学习如何写好JS（上）](https://bbs.csdn.net/topics/618317507)


👉[紧跟月影大佬的步伐，一起来学习如何写好JS（下）](https://bbs.csdn.net/topics/618317507)


### 最后

不知道你们用的什么环境，我一般都是用的Python3.6环境和pycharm解释器，没有软件，或者没有资料，没人解答问题，都可以免费领取（包括今天的代码），过几天我还会做个视频教程出来，有需要也可以领取~  

给大家准备的学习资料包括但不限于：  

Python 环境、pycharm编辑器/永久激活/翻译插件  

python 零基础视频教程  

Python 界面开发实战教程  

Python 爬虫实战教程  

Python 数据分析实战教程  

python 游戏开发实战教程  

Python 电子书100本  

Python 学习路线规划

![](https://img-blog.csdnimg.cn/d29631674929476f9c3b30f7ff58dff0.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaTM0Nzc5NTc5MA==,size_16,color_FFFFFF,t_70)




**网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。**

**[需要这份系统化学习资料的朋友，可以戳这里无偿获取](https://bbs.csdn.net/topics/618317507)**

**一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！**