vue-模拟Element-UI实现form表单

总文件入口-index.vue

用户使用层

• 主要是用来定义：

1. 校验规则
2. 登陆事件处理（全部校验通过与否调用全局弹窗）

项目结构说明

用户入口文件-inex.vue

提交按钮 登录
登陆事件处理（全部校验通过与否调用全局弹窗）

全局校验-From.vue

• 全局的校验，调用每个自组建的校验结果

单一input内容校验-FromItem.vue

1. 获取校验规则
2. 获取当前的值
3. import Schema from "async-validator"; 引入校验模块
4. 创建校验规则
5. 执行校验
6. if(erro){thi.message='错误信息'}else{this.messgae=''}

type:text填写信息-Input.vue

1. 改变value值
2. 调用父组建校验方法

通知全局组建-Vue.prototype.$notice

（弹窗类组建封装）-全局注册组建

1. 在vue定义方法$notice
2. 方法内部调用create方法
3. 传入组建和props

使用new Vue 生成组建挂在在dome上；

思路：

1. 创建dom元素
2. 将dom元素放在body里面
3. 显示后，消失操作， 删除dom元素以及销毁实例

在new Vue中，redner中的参数 h

  h： 是一个`createElement函数` 可以返回一个虚拟dome

调用 new Vue().$mount()

`$mount()`的目的 ：将vdome -> dom

vm

 `vm` :  new Vue()构造函数

vm.$el

 真实的dom元素

vm.$children

[Vuecomponent]

const comp = vm.$children[0] comp.remove=()=>{}

给vue组建定义删除组建的方法
 使用new Vue 生成组建挂在在dome上；

/utils/create-构造组件实例

import Vue from 'vue'  
  
// 实现一个create方法，能够创建指定组件实例  
// 并将其挂载至body上  
// Component是组件配置对象  
export default function create(Component, props) {  
// 怎么创建组件实例  
// 方案1：可以通过Vue.extend(Component)获取组件构造函数  
// const Ctor = Vue.extend(Component)  
// const comp = new Ctor()  
  
// 方案2：借助Vue构造组件实例  
const vm = new Vue({  
render(h) {  
// h是createElement函数，可以返回vdom  
return h(Component, {props})  
}  
}).$mount() // $mount()目标：将vdom=》dom  
  
// 手动追加dom  
document.body.appendChild(vm.$el)  
  
const comp = vm.$children[0]  
  
// 淘汰逻辑  
comp.remove = () => {  
document.body.removeChild(vm.$el)  
// 执行 remove 方法时，执行 $destroy 销毁实例  
comp.$destroy()  
}  
  
return comp  
}

组建内容-/components/Notice.vue

学习资源

思维导图： https://www.processon.com/vie...
github：https://github.com/speak44/Vu...