使用组件就像流水线上的工人；设计组件就像设计流水线的人，设计好了给工人使用。
完整项目地址：仿 ElementtUI 实现一个 Form 表单
一. 目标
仿 ElementUI 实现一个简单的 Form 表单，主要实现以下四点：
Form
FormItem
Input
表单验证
我们先看一下 ElementUI 中 Form 表单的基本用法
<el-form :model="ruleForm" :rules="rules" ref="loginForm"> <el-form-item label="用户名" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="pwd">
<el-input v-model="ruleForm.pwd"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
</el-form-item>
</el-form>
在 ElementUI 的表单中，主要进行了 3 层嵌套关系，
Form 是最外面一层，
FormItem 是中间一层，最内层是
Input 或者
Button 。二. 创建项目
我们通过
Vue CLI 3.x 创建项目。使用
vue create e-form 创建一个目录。使用
npm run serve 启动项目。三. Form 组件设计
ElementUI 中的表单叫做
el-form ，我们设计的表单就叫
e-form 。为了实现
e-form 表单，我们参考 ElementUI 的表单用法，总结出以下我们需要设计的功能。 e-form 负责全局校验，并提供插槽；
e-form-item 负责单一项校验及显示错误信息，并提供插槽；
e-input 负责数据双向绑定；
1. Input 的设计
我们首先观察一下 ElementUI 中的
Input 组件：
<el-input v-model="ruleForm.name"></el-input>在上面的代码中，我们发现
input 标签可以实现一个双向数据绑定，而实现双向数据绑定需要我们在
input 标签上做两件事。 要绑定 value
要响应 input 事件
当我们完成这两件事以后，我们就可以完成一个
v-model 的语法糖了。我们创建一个 Input.vue 文件：
