1.前期准备

使用vue-cli初始化一个项目

vue create my-app

2.文件结构

新建KForm.vue，KFormItem.vue，KInput.vue文件

image.png

3.组件划分

image.png

4.组件间的联系

未命名文件 (1).png

4.用户使用方式

我们就仿照elementUI Form表单的使用方式，来构建我们的组件

image.png

5.编写代码

k-input

<template>
  <div>
    <input type="text" :value="value" @blur="onInput" />
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    onInput(e) {
      this.$emit("input", e.target.value);
      // 值发生变化的时候，父组件派发事件，父组件监听事件
      this.$parent.$emit("validate");
    },
  },
};
</script>

重点：
1.组件使用了v-mode实现自定义绑定。
2.这个组件唯一的重点就是this.$parent.$emit("validate")，这句代码的意思就是，input事件触发的时候，通知父组件进行校验，这个跟我们平时所用到的事件总线的机制一样，只不过事件总线是新的Vue实例

k-form-item

<template>
  <div>
    <div class="formItem">
      <label v-if="label">{{ label }}：</label>
      <slot></slot>
    </div>
    <p v-if="error" class="error">{{ error }}</p>
  </div>
</template>
<style scoped>
.formItem {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}
.error {
  font-size: 12px;
  color: red;
}
</style>
<script>
import Validator from "async-validator";
export default {
  inject: ["form"],
  componentName:"KFormItem",
  props: {
    label: {
      type: String,
    },
    prop: {
      type: String,
    },
  },

  data() {
    return {
      error: "",
    };
  },
  mounted() {
    this.$on("validate", () => {
      if (this.prop) {
        this.validate();
      }
    });
  },
  methods: {
    validate() {
      const rules = this.form.rules[this.prop];
      const model = this.form.model[this.prop];
      const validator = new Validator({[this.prop]: rules});
      return validator.validate({[this.prop]: model}, (errors) => {
        if (errors) {
          console.log(errors);
          this.error = errors[0].message;
        } else {
          console.log("校验成功");
          this.error = "";
        }
      });
    },
  },
};
</script>

重点：
1.prop属性的用途：我们都知道一个formItem组件对应一个input组件，按照我们的组件规划，这个组件的主要的功能就是校验，既然是校验，我们就得知道我们校验的是哪个属性，执行的是哪个属性的校验规则，所以将我们校验的那个属性，让用户直接当作props属性传进来，所以这也就是prop和v-model绑定的那个值必须是一样的原因，我们根据这个属性，就可以拿到这个属性的值和这个属性对应的规则，从而利用async-validator这个第三方库执行校验。
2.inject:["form"]的目的：form-item想要校验，校验哪个属性通过prop已经知道了，接下来就是想办法拿到model和rules，我们用provide/inject的方式将form自己的实例注入进来，然后就可以直接通过inject注入的form访问到model和rules，并且还是响应式，因为我们只有一个数据源

k-form

<template>
  <div>
    <slot></slot>
  </div>
</template>
<script>
export default {
  provide() {
    return {
      form: this,
    };
  },
  componentName:"KForm",
  props: {
    model: {
      type: Object,
      required: true,
    },
    rules: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {
    validate(callback) {
      const validates = this.$children
        .filter((vm) => vm.prop)
        .map((vm) => vm.validate());
      console.log(validates);
      Promise.all(validates)
        .then(() => {
          callback(true);
        })
        .catch(() => {
          callback(false);
        });
    },
  },
};
</script>

重点：
1.设置model和rules这俩个props属性，就是为了在k-form-item组件中可以访问到model
2.validate方法，就是遍历$children这个属性，这个属性会把所有的自定义组件实例，组合成一个数组，遍历执行k-form-item里面的validate方法

app.vue中引用组件

<template>
  <div id="app">
    <!-- <childs /> -->
    <k-form :model="model" :rules="rules" ref="myForm">
      <k-form-item label="用户名" prop="userName">
        <k-input v-model="model.userName"></k-input>
      </k-form-item>
      <k-form-item label="密码">
        <k-input v-model="model.password"></k-input>
      </k-form-item>
      <k-form-item>
        <button @click="onSubmit">提交</button>
      </k-form-item>
    </k-form>
  </div>
</template>

<script>
// import childs from "./components/Childs/index.vue";
import KFormItem from "./components/form/KFormItem.vue";
import KInput from "./components/form/KInput.vue";
import KForm from "./components/form/KForm.vue";
import create from "./utils/create";
import Notify from "./components/Notify";
export default {
  components: {
    KFormItem,
    KInput,
    KForm,
  },

  name: "App",
  data() {
    return {
      model: {userName: "张三", password: ""},
      rules: {
        userName: [{required: true, message: "用户名不能为空"}],
      },
    };
  },
  methods: {
    onSubmit() {
      this.$refs.myForm.validate((res) => {
        create(Notify, {
          title: "消息",
          message: res ? "登录成功" : "校验失败",
        }).show();
      });
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  display: flex;
  justify-content: center;
}
</style>

create和Notify是我自己封装的方法和组件，不是本文章的重点，只需要关注res是true还是false