陌生的V-model

今天才懂V-model

前因：这两天网上找了一个老哥写的el-from源码实现解析的文章，手动实现了一下，发现通过provide暴露的props中的数据无法在它的后代节点实时响应变化。网上找了半天的办法如何实现provide和inject的响应数据的办法，后来发现其实只要provide的提供的是一个对象或者是this就是响应式的数据。但是我本地仍然无法通过手动实现的input数据的变化在form-item中捕获到form中的数据。后来发现原来是input的数据没有触发form组件的数据变化。整个数据流程，input表单数据改变（填写）-->form--->formItem 。最终还是找到了问题所在，解决的办法：在input的对应事件函数中：this.$emit('input',data)
这里百思不解，这一行代码能够响应到form中，最后发现所有的问题出在v-model这行代码上

<template>
    <div>
        <input :type="type" :value="value" @input="onInput" @change='onChange' v-bind="$attrs"/>
    </div>
</template>
<script>
export default {
    name:'DiyInput',
    props:{
        type:{
            type:String,
            default:'text',
        },
        value:{
            type:String,
            de***t:'',
        }
    },
    methods:{
        onInput:function(event){
            this.$parent.$emit('validate')
            this.$emit('input',event.target.value)
        },
        onChange:function(event){
            //通知父组件要做数据校验
            // this.$parent.$emit('validate')
            // this.$emit('input',event.target.value)
        }
    }
}
</script>
<style  scoped>

</style>

解析：模版上的v-model本质上是等于v-bind和v-on这个两个指令，绑定一个数据，触发一个事件
详解：https://blog.csdn.net/Fabulous1111/article/details/85265503
https://www.cnblogs.com/adspark/p/11738775.html
https://cn.vuejs.org/v2/guide/components-custom-events.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E7%BB%84%E4%BB%B6%E7%9A%84-v-model

<input v-model="msg">相当于变成了<input v-bind:value="msg" v-on:input="msg=$event.target.value">