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

最新推荐文章于 2023-02-19 12:01:00 发布

Ace.三阶斗尊

最新推荐文章于 2023-02-19 12:01:00 发布

阅读量430

点赞数

分类专栏： Vue 文章标签： vue.js 仿写表单组件校验 provide和inject inheritAttrs

本文链接：https://blog.csdn.net/qq_42231156/article/details/107747268

版权

本文将详细介绍如何使用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组件中：