1、iview组件库

1.1、基于原生组件的自定义iview表单组件

<template>
    <input type="text" @input="emitfun" v-model="value" />
</template>

<script>
export default {
    props:{
        //value绑定
        value:{
            type:[String, Number],
            default:()=>{
                return undefined;
            }
        },
    },
    metheds:{
        //onChange绑定
        emitfun() {
            this.$parent.$emit("on-form-change");
            this.$emit("input", this.val);
        }
    }
}

1.2、不基于原生组件的自定义iview表单组件

<template>
    <div type="text" @click="emitfun(1)" :class="value==1?selestedClass:defaultClass" />选项1</div>
    <div type="text" @click="emitfun(2)" :class="value==2?selestedClass:defaultClass" />选项2</div>
</template>

<script>
export default {
    props:{
        //value绑定，必须有
        value:{
            type:[String, Number],
            default:()=>{
                return undefined;
            }
        },
    },
    metheds:{
        //onChange绑定，必须有
        emitfun(myValue) {
            this.$parent.$emit("on-form-change");
            this.$emit("input", myValue);
        }
    }
}
</script>

<style lang="less" scoped>
    .selestedClass{
       //选中的样式
    }
    .defaultClass{
       //没选中的样式（默认样式）
    }
</style>

2、antd组件库

同样要绑定value与onChange两个属性

import React from 'react';
import { Input } from 'antd';
const Son = (props) => {
  return (
    <div>
      <Input onChange={e => {
        props.onChange(e.target.value);
      }}
　　　　value={props.value}
      />
    </div>
  )
}

export default Son;