如何用Vue自己写一个简易版elementUI的form组件

完整源代码请移步GitHub： https://github.com/webxing/element_form

简书地址： https://www.jianshu.com/u/489662a091fd （更新高于CSDN）

要仿照的elementUI的效果：

<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>

实现思路

Step1：实现一个支持 v-model 的自定义输入组件

要实现的结果如下：保证 l-input 可以使用 v-model 来进行数据的双向绑定

<l-input v-model="inputValue" :type="type"></l-input>

---

v-model:

• 原理：

 <l-input :value="inputValue" @input="inputValue = $event"></l-input>

• 把 inputValue 传给组件 l-input 内部
• 当组件 l-input 的 input 事件被触发时自动将事件携带的参数赋值给 inputValue

$event:

当在父级组件监听事件的时候，我们可以通过 $event 访问到被抛出的值

---

代码

l-input 组件实现代码如下：

<template>
  <!-- LInput组件 -->
  <div class='l-input'>
    <input :type="type" :value="value" @input="handlerInput">
  </div>
</template>

这个组件内的