简单的表单组件的实现

一、前言

涉及的知识点的主要是v-model是语法糖，在自定义组件如何实现v-model、$attrs、inheritAttrs、async-validator插件使用方法。

• v-model等同于<input :value="val" @input="val=$event.target.value">
• vm.$attrs 用于继承父级或者祖先级的属性（除了class、style、props传递的属性）

二、实现思路

三、具体实现

• KInput
  触发input事件，将输入的值传入到父组件中,子组件接收父组件传入的value.

<template>
    <div>
        <input :value="value" @input="onInput" v-bind="$attrs">
    </div>
</template>

<script>
    export default {
        inheritAttrs: false, // 避免顶层容器继承属性
        //接收父组件value
        props: {
            value: {
                type: String,
                default: ''
            }
        },
        methods: {
            onInput(e) {
                // 触发父组件的input事件，并将value传过去，通知父组件数值变化
                this.$emit('input', e.target.value);

                // 通知FormItem校验
                this.$parent.$emit('validate');
            }
        },
    }
</script>

• KFormItem
  接收父组件传来的label以及KForm传来的实例，通过kForm实例获取model和rules。引入‘async-validator’校验，返回promise，如果有错误则设置错误信息。

<template>
  <div>
    <label v-if="label">{{label}}</label>
    //插入kInput
    <slot></slot>
    <!-- 校验信息 -->
    <p v-if="errorMessage">{{errorMessage}}</p>
  </div>
</template>

<script>
import Schema from "async-validator";

export default {
  data() {
    return {
      errorMessage: ""
    };
  },
  inject: ["form"],
  props: {
    label: {
      type: String,
      default: ""
    },
    prop: String
  },
  mounted() {
    //监听validate
    this.$on("validate", () => {
      this.validate();
    });
  },
  methods: {
    validate() {
      const rules = this.form.rules[this.prop];
      const value = this.form.model[this.prop];
      const desc = {
        [this.prop]: rules
      };
      const schema = new Schema(desc);
      return schema.validate({ [this.prop]: value }, errors => {
        if (errors) {
          this.errorMessage = errors[0].message;
        } else {
          this.errorMessage = "";
        }
      });
    }
  }
};
</script>

• KForm 遍历KFormItem实例中的validate，并触发执行，promise.all(tasks)，等待所有task执行完毕后进行后续操作。

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

<script>
export default {
  provide() {
    return {
      form: this // 传递Form实例给后代，比如FormItem用来校验
    };
  },
  props: {
    model: {
      type: Object,
      required: true
    },
    rules: {
      type: Object
    }
  },
  methods: {
    validate(cb) {
      // map结果是若干Promise数组
      const tasks = this.$children
        .filter(item => item.prop)
        .map(item => item.validate());
      //   所有任务必须全部成功才算校验通过
      Promise.all(tasks)
        .then(() => cb(true))
        .catch(() => cb(false));
    }
  }
};
</script>

• index.vue
  执行KForm中的validate方法，并传入回调函数，登录失败和成功的消息。

    <template>
  <div>
    <KForm :model="model" :rules="rules" ref="loginForm">
      <KFormItem label="用户名" prop="username">
        <KInput v-model="model.username"></KInput>
      </KFormItem>
      <KFormItem label="密码" prop="password">
        <KInput v-model="model.password" type="password"></KInput>
      </KFormItem>
      <KFormItem label="记住密码" prop="password">
        <KCheckBox v-model="model.remember"></KCheckBox>
        <KCheckBox :checked="model.remember" @change="model.remember = $event"></KCheckBox>
      </KFormItem>
      <KFormItem>
        <button @click="onLogin">登录</button>
      </KFormItem>
    </KForm>
    {{model}}
  </div>
</template>
<script>
import KInput from "./KInput.vue";
import KFormItem from "./KFormItem.vue";
import KForm from "./KForm.vue";
export default {
  components: {
    KInput,
    KFormItem,
    KForm
  },
  data() {
    return {
      model: {
        username: "tom",
        password: "",
        remember: false
      },
      rules: {
        username: [{ required: true, message: "用户名必填" }],
        password: [{ required: true, message: "密码必填" }]
      }
    };
  },
  methods: {
    onLogin() {
      // 创建弹窗实例
      let notice;

      this.$refs.loginForm.validate(isValid => {
            if(isValid){
                alert('登录成功')
            }else{
                alert('登录失败')
            }
        });

        notice.show();
      });
    }
  }
};
</script>