(一)模拟form表单:
1.创建AForm.vue组件:
<template>
<div class="a-form">
<slot></slot>
</div>
</template>
<script>
export default{
name:"AForm",
provide(){ //祖先向后代组件传值,将整个祖先组件this传递给后代,后代用inject:["form"]就可以接受祖先组件传递过来的值了
return{
form:this
}
},
props:{
model:{
type:Object,
require:true
},
rules:[Object]
}
}
</script>
<style lang="less" scoped>
</style>
2.创建AFormItem.vue组件:
<template>
<div class="a-form-item">
<div class="item-box">
<label v-if="label" class="item-box-label">{{label}}</label>
<slot></slot>
</div>
<p v-if="errMessage">{{errMessage}}</p>
</div>
</template>
<script>
export default{
inject:["form"], //后代接受祖先传递过来的form参数值
name:"AFormItem",
props:{
label:{
type:String,
default:""
},
prop:{
type:String,
default:""
}
},
data(){
return{
errMessage:""
}
},
mounted(){
this.$on("validate",this.validateHandle)
},
methods:{
validateHandle(val){ //校验这个prop是否满足rules里面的,如果满足就errMessage='',否则errMessage='报错信息'
this.form.rules[this.prop]
}
}
}
</script>
<style lang="less" scoped>
.a-form-item{
padding: 10px 0;
}
.item-box{
display: flex;
justify-content: flex-start;
flex-direction: row;
align-items: center;
.item-box-label{
width: 80px;
}
}
</style>
3.创建AInput.vue组件:
<template>
<div class="a-input">
<input v-bind='$attrs' :value="value" @input="onInput"/>
</div>
</template>
<script>
export default{
name:"AInput",
inheritAttrs:false, //为true时,默认 直接挂在在父组件<a-input type="text" placeholder="请输入"></a-input>
// 的type="text" placeholder="请输入"属性会被挂载在<div class="a-input"/>上
props:{
value:{
type:String,
default:""
}
},
methods:{
onInput(e){
let val=e.target.value
this.$emit("input",val);
this.$parent.$emit("validate",val)
}
}
}
</script>
<style lang="less" scoped>
</style>
4. 在home.vue组件中调用:
<template>
<div class="home">
<a-form :model='form' :rules='rules'>
<a-form-item label="密码1" prop="user">
<a-input type="text" v-model="form.user" autocomplete="off" placeholder="请输入密码"></a-input>
</a-form-item>
<a-form-item >
<button>提交</button>
</a-form-item>
</a-form>
</div>
</template>
<script>
import AForm from "@/components/AForm/AForm.vue"
import AFormItem from "@/components/AForm/AFormItem.vue"
import AInput from "@/components/AForm/AInput.vue"
export default {
name: 'home',
components:{
AForm,
AFormItem,
AInput
},
data(){
return{
form:{
user:'123'
},
rules:{
}
}
}
}
</script>
注意:会用到的vue知识点:
1. v-model的原理:<input :value="value" @input='inputHandle' />。
2. provide和inject:祖先组件向后代组件传值。
4. inheritAttrs和$attrs属性:详细参考https://blog.csdn.net/qq_42231156/article/details/103934991。
5. slot插槽:参考https://blog.csdn.net/qq_42231156/article/details/103927760。
6. $on和$emit的事件传递:。