1. 创建组件目录结构:
2. 在form.vue组件中:
<template>
<div>
<slot></slot>
</div>
</template>
<script>
export default {
provide(){
return {
form:this //祖先后代传值:祖先传值
}
},
props:{
model:{
type:Object,
required:true
},
rules:[Object]
},
methods:{
validate(cb){
let resultArr=this.$children.filter(item=>item.prop).map(item=>item.validate()) //筛选子元素中的有prop属性的元素,并执行该元素下的validate方法,返回promise的数组。
Promise.all(resultArr).then(()=>cb(true)).catch(()=>cb(false)) //then里面是校验所有的都成功,catch校验至少有一个失败
},
}
}
</script>
2. 在formItem.vue组件中:
<template>
<div>
<di