v-model specific implementation

v-model 

Equal to: value = "value"

@input = "handleInput"

<template>
    <div class="app">
        <input type="text" :value = "value" @input="handleInput" 
        v-bind="$attrs">
    </div>
</template>
<script lang="ts">
import Vue from 'vue'

// KInput 要用v-model 所以说必须有俩逻辑
// 1， value 的回显，数据绑定，数据变化的时候，也跟着回显！
// 2 监听 input 事件， 数据也跟着发生变化
export default {
    props:{
        value:{
            type:String,
            default:""
        }
    },
    methods:{
        handleInput(ev){
            let value = ev.target.value;
            // 这边必须要暴露出去， 要不然使用者接受不到input 事件！
            this.$emit("input",value)
            // 这里有一些额外的操作//****
        }
    }
}
</script>


<style scoped>
    .app{
        background-color: pink;
        width:400px;
        height: 500px;
    }
</style>

 

This logic must be clarified!

KInput component,

in 

this.$emit("input",value)

 

Why do you need this sentence, because the external also needs to listen to input events. To put it bluntly, it is to give the input a shell and add some functions at the same time! (Function for subsequent verification)