极简系列---vue2.x表单组件form

---

本文从零开始实现一个自定义的vue2.x表单组件ti-form，组件使用体验类似element-ui

实现过程涉及到的知识点

2. 事件的派发dispatch
3. v-mode语法糖原理
4. $attrs，参考https://cn.vuejs.org/v2/api/#vm-attrs
5. provide/inject传递数据，参考https://cn.vuejs.org/v2/api/#provide-inject

需求拆解

• 实现组件ti-form，处理表单整体校验(收集所有ti-form-item的validate)、表单data维护，表单rules校验规则维护
• 实现组件ti-form-item，处理单个表单项组件的校验，显示表单label, 校验错误信息
• 实现组件ti-input用于测试表单组件

ti-form组件基本结构

新建ti-form.vue，实现拆解需求提供的功能

1. 接受model，保存表单数据
2. 接受校验规则
3. 提供表单整体校验方法validate，调用子组件ti-form-item的校验方法

先上一段伪代码，展示组件基本结构

<template>
  <div>
    <slot></slot>
  </div>
</template>

<script>
export default {
   
  componentName: 'ti-form',// 自定义一个属性名，表示组件名称，在收集校验的方法是会用到
  props: {
   
    model: {
   
      type: Object,
      required: true,
    },
    rules: Object,
  },
  methods: {
   
    validate () {
   },
  },
};
</script>

ti-form-item组件基本结构

async-validator三方库实现校验，antd和ElementUi也是使用的这个库，用法参考https://www.npmjs.com/package/async-validator

1. 接受label，用于显示表单项文本
2. 接受prop，当前表单项的key，用于获取校验规则、表单项的值。
3. 提供validate方式，校验当前表单项
4. 注册自定事件validate，表单项的具体控件如ti-input在blur或者change时调用该方法进行校验

<template>
  <div>
    div
    <label v-if="label">{
   {
    label }}</label>
    <!-- 显示表单元素 -->
    <slot></slot>
    <!-- 显示错误信息 -->
    <p v-if="error"
       class="error">{
   {
    error }}</p>
  </div>
</template>

<script>
import Schema from "async-validator";
export default {
   
  componentName: 'ti-form-item',
  props: {
   
    label: {
   
      type: String,
      default: "",
    }