实现一个简易版的Form表单

1、正常使用el-form的情况如下:


  
     
   

由基本的使用方法可以知道,form表单实现了三个组件,分别是form,form-item,以及input,将form表单的数据放在form中,提供给后代组件。而form-item主要进行组件的校验。el-input则实现输入事件。
2、form的实现




form表单主功能是通能过插槽展示子组件,通过provide/inject将form传递给子组件。
3、form-item的实现




form-item主要功能是接受父组件传递form中所拥有的form的值和校验规则,同时通过async-validator进行规则校验,同时将校验结果显示。
4、input的实现




input主要进行dom层的实现,同时通过input输入事件,输入框的双向绑定。通过$attrs将父组件中没有通过props传递下来的值进行接收,例如:placeholder
5、新建一个index.vue,将各个组件引入并使用。




一个简单的form表单实现了,这里只是实现了基本的input的表单校验功能。想了解的小伙伴可以自己添加功能。

你可能感兴趣的:(实现一个简易版的Form表单)