使用組件就像流水線上的工人；設(shè)計組件就像設(shè)計流水線的人，設(shè)計好了給工人使用。

完整項目地址：仿 ElementtUI 實現(xiàn)一個 Form 表單

一. 目標

仿 ElementUI 實現(xiàn)一個簡單的 Form 表單，主要實現(xiàn)以下四點：

我們先看一下 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 層嵌套關(guān)系， Form 是最外面一層， FormItem 是中間一層，最內(nèi)層是 Input 或者 Button 。

二. 創(chuàng)建項目

我們通過 Vue CLI 3.x 創(chuàng)建項目。

使用 vue create e-form 創(chuàng)建一個目錄。

使用 npm run serve 啟動項目。

三. Form 組件設(shè)計

ElementUI 中的表單叫做 el-form ，我們設(shè)計的表單就叫 e-form 。

為了實現(xiàn) e-form 表單，我們參考 ElementUI 的表單用法，總結(jié)出以下我們需要設(shè)計的功能。

1. Input 的設(shè)計

我們首先觀察一下 ElementUI 中的 Input 組件：

<el-input v-model="ruleForm.name"></el-input>

在上面的代碼中，我們發(fā)現(xiàn) input 標簽可以實現(xiàn)一個雙向數(shù)據(jù)綁定，而實現(xiàn)雙向數(shù)據(jù)綁定需要我們在 input 標簽上做兩件事。

當我們完成這兩件事以后，我們就可以完成一個 v-model 的語法糖了。

我們創(chuàng)建一個 Input.vue 文件：

<template> <div>  <!-- 1. 綁定 value   		 2. 響應(yīng) 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>

我們對上面的代碼做一點解釋：