简单仿写element-ui的表单组件以及校验

本文将详细介绍如何使用Vue.js模仿Element-UI的表单组件和验证功能。通过创建组件目录结构,包括form.vue、formItem.vue和input.vue,结合provide和inject以及$attrs/$listeners来实现组件间的属性传递和事件监听,同时利用inheritAttrs进行属性隔离,最终在index.vue中成功应用自定义表单组件。
摘要由CSDN通过智能技术生成

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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值