v-model的实现原理

vue中的v-model很好用，我们经常用它做双向绑定：

>
  
id="app">
    {{username}} />
    type="text" v-model="username">
  >
>

<script>
export default {
  name: 'App',
  data(){
    return {
      username:''
    }
  }

}
>

v-model其实是个语法糖，它实际上是做了两步动作：
1、绑定数据value
2、触发输入事件input
也就是说，v-model等同于：

>
  
id="app">
    {{username}} />
    type="text" :value="username" @input="username=$event.target.value">
  >
>

<script>
export default {
  name: 'App',
  data(){
    return {
      username:''
    }
  }

}
>


明白了这一点非常有用，我们可以在自定义的input组件中使用它：

>
  
id="app">
    {{username}} />
    type="text" v-model="username">>
  >
>

<script>
import myinput from './components/myinput'
export default {
  name: 'App',
  components:{'my-input': myinput},
  data(){
    return {
      username:''
    }
  }

}
>

myinput.vue：

>
    
class="my-input">
        type="text" class="my-input__inner" @input="handleInput"/>
    >
>

<script>
    export default {
        name: "myinput",
        props:{
            value:{ //获取父组件的数据value
                type:String,
                default:''
            }
        },
        methods:{
            handleInput(e){
                this.$emit('input',e.target.value) //触发父组件的input事件
            }
        }
    }
>