# Custom form components
Components that implement
v-model
can be called form components
# Example
Customize the counter button component to get the number of button clicks. The function of this component is the same as the built-in component
<template>
<form-create :rule="rule" v-model="fApi" :option="options"/>
</template>
<script>
formCreate.component('inputBtn', {
data: function () {
return {
num: this.value,
}
},
render($h){
return $h('ElButton',{
props:{
disabled: this.disabled,
long: true
},
on:{
click:()=>{
this.onClick()
}
}
},['compute'+this.num])
},
props:{
//Predefined
disabled:Boolean,
value:Number,
},
watch:{
value(n){
//Synchronize value
this.num = n
}
},
methods: {
onClick: function () {
this.num++
//Update the value inside the component
this.$emit('input',this.num)
},
},
})
export default {
data(){
return {
fApi:{},
options:{
onSubmit:(formData)=>{
alert(JSON.stringify(formData))
},
resetBtn:true
},
rule:[
{
type:'inputBtn',
field:'btn',
title:'title',
value:10
}
]
}
}
}
</script>
# Predefined
Define the following properties and events to achieve the same effect as the built-in components. Give it a try.
props
Receive some properties through props
inside the custom component
value
Component valuedisabled
Disabled state of the component
例如:
vm = Vue({
props:{
value:String,
disabled:Boolean
}
})
Input event
Update the internal value of the component through the input
event
When the component value changes, update the value through the input event. For example:
vm.$emit('input',newValue)
# Mount custom components
The custom component to be generated must be mounted globally via the vue.component
method, or mounted via the form Create.component
method
for example:
formCreate.component('TestComponent',component)
# Generate
The form component must define the field
attribute
JSON
{
type:'TestComponent',
value:'test',
field:'testField',
title:'title'
}
Maker
formCreate.maker.create('TestComponent','testField','title').value('test')
Now this custom component can be operated like the built-in component