Vue中表单组件的实现

强调vue语法

createElement 函数是用来生成 HTML DOM 元素的
Vue.js 里面的 createElement 函数,这个函数的作用就是生成一个 VNode节点,render 函数得到这个 VNode 节点之后,返回给 Vue.js 的 mount 函数,渲染成真实 DOM 节点,并挂载到根节点上。

Vue 的 m o u n t ( ) 为 手 动 挂 载 , 在 项 目 中 可 用 于 延 时 挂 载 ( 例 如 在 挂 载 之 前 要 进 行 一 些 其 他 操 作 、 判 断 等 ) 之 后 要 手 动 挂 载 上 。 n e w V u e 时 , e l 和 mount() 为手动挂载, 在项目中可用于延时挂载( 例如在挂载之前要进行一些其他操作、 判断等) 之后要手动挂载上。 new Vue时, el和 mount()newVueelmount并没有本质上的不同。

this.$destroy()内部銷毀組件

async-validator是一个表单的异步验证的第三方库

// 基本用法
var schema = require('async-validator'); // 引用组件
var descriptor = {
 name: {
  type: "string",
  required: true,
  validator: (rule, value) => value === 'muji',
 }
}; // 定义一个descriptor
var validator = new schema(descriptor); // descriptor分配给schema,创建一个validator
validator.validate({name: "muji"}, (errors, fields) => {
 if(errors) {
  // validation failed, errors is an array of all errors
  // fields is an object keyed by field name with an array of
  // errors per field
 return handleErrors(errors, fields);
 }
  // validation passed
}); // 参数一:要验证的对象、参数二:回调函数

v-mod是语法糖,实现自定义组件双绑需要指定:value和@input即可

其中要思考的问题
1 input是自定义组件,它是怎么实现双向绑定的
2 formItem是怎么知道执行校验的,它是怎么知道input状态的?它是怎么获得对应的数据模型的
3.form是怎么进行全局校验的 它用什么方法把数据模型和校验规则传递给内部组件?

index.vue



  



  


Form







FormItem



  



  


Input







你可能感兴趣的:(Vue中表单组件的实现)