1.前期准备
使用vue-cli初始化一个项目
vue create my-app
2.文件结构
新建KForm.vue，KFormItem.vue，KInput.vue文件
3.组件划分
4.组件间的联系
4.用户使用方式
我们就仿照elementUI Form表单的使用方式，来构建我们的组件
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
