使用组件就像流水线上的工人；设计组件就像设计流水线的人，设计好了给工人使用。
完整项目地址：仿 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 文件：
<template> <div> <!-- 1. 绑定 value 2. 响应 input 事件 --> <input type="text" :value="valueInInput" @input="handleInput"> </div> </template> <script> export default { name: "EInput", props: { value: { // 解释一 type: String, default: '', } }, data() { return { valueInInput: this.value // 解释二 }; }, methods: { handleInput(event) { this.valueInInput = event.target.value; // 解释三 this.$emit('input', this.valueInInput); // 解释四 } }, }; </script>
我们对上面的代码做一点解释：
**解释一：**既然我们想做一个 Input 组件，那么接收的值必然是父组件传进来的，并且当父组件没有传进来值的时候，我们可以它一个默认值 "" 。
**解释二：**我们在设计组件的时候，要遵循单向数据流的原则：父组件传进来的值，我们只能用，不能改。那么将父组件传进来的值进行一个赋值操作，赋值给 Input 组件内部的 valueInInput ，如果这个值发生变动，我们就修改内部的值 valueInInput 。这样我们既可以处理数据的变动，又不会直接修改父组件传进来的值。
**解释三：**当 Input 中的值发生变动时，触发 @input 事件，此时我们通过 event.target.value 获取到变化后的值，将它重新赋值给内部的 valueInInput 。
**解释四：**完成了内部赋值之后，我们需要做的就是将变化后的值通知父组件，这里我们用 this.$emit 向上派发事件。其中第一个参数为事件名，第二个参数为变化的值。
完成了以上四步，一个实现了双向数据绑定的简单的 Input 组件就设计完成了。此时我们可以在 App.vue 中引入 Input 组件观察一下结果。
<template> <div> <e-input v-model="initValue"></e-input> <div>{{ initValue }}</div> </div> </template> <script> import EInput from './components/Input.vue'; export default { name: "app", components: { EInput }, data() { return { initValue: '223', }; }, }; </script>
2. FormItem 的设计
<el-form-item label="用户名" prop="name"> <el-input v-model="ruleForm.name"></el-input> </el-form-item>
在 ElementUI 的 formItem 中，我们可以看到：
需要 label 来显示名称；
需要 prop 来校验当前项；
需要给 input 或 button 预留插槽；
根据上面的需求，我们可以创建出自己的 formItem ，新建一个 FormItem.vue 文件 。