手写实现一个Vue表单组件

KInput

1. 双向绑定:@input、:value
2. 派发校验事件

<template>
<div>
    <input :value="value" @input="onInput" v-bind="$attrs">
</div>
</template>

<script>
export default {
    inheritAttrs: false,
    props: {
        value: {
            type: String,
            default: ''
        }
    },
    methods: {
        onInput(e) {
            this.$emit('input', e.target.value)
            // 通知FormItem校验
            this.$parent.$emit('validate')
        }
    }
}
</script>

KFormItem

1. 给Input预留插槽 - slot
2. 能够展示label和校验信息
3. 能够进行校验

<template>
    <div>
        <label v-if="label">
            {
  { label }}
        </label>
        <slot></slot>
        <