生成自定义表单组件

实现v-model的组件都可以称为表单组件

定义好以下属性和事件,就能达到和内置的表单组件相同的效果. 赶快试一试吧

props

在自定义组件内部通过props接收一下属性

例如:

//vue 组件
{
  props:{
    modelValue:String,
    disabled:Boolean      
  }
}

//vue 组件
{
  props:{
    modelValue:String,
    disabled:Boolean      
  }
}

update:modelValue 事件

通过update:modelValue事件更新组件内部的值

当组件值发生变化后,通过 input 事件更新值.例如:

vm.$emit('update:modelValue',newValue)

vm.$emit('update:modelValue',newValue)

要生成的自定义组件必须通过vue.component方法挂载到全局,或者通过formCreate.component方法挂载

例如:

formCreate.component('TestComponent',component)

formCreate.component('TestComponent',component)

表单组件必须定义field属性

JSON

{
    type:'TestComponent',
    value:'test',
    field:'testField',
    title:'自定义组件'
}

{
    type:'TestComponent',
    value:'test',
    field:'testField',
    title:'自定义组件'
}

Maker

formCreate.maker.create('TestComponent','testField','自定义组件').value('test')

formCreate.maker.create('TestComponent','testField','自定义组件').value('test')

自定义计数器按钮组件,获取按钮点击数.该组件的功能和内置组件相同

生成自定义表单组件 ​