【造轮子】如何用 Vue2 写出一个支持 v-model 的 input 自定义组件

父组件关键代码：

<MyInput v-model="inputValue" />

<!-- 相当于这样写 -->
<MyInput :value="inputValue" @input="inputValue = $event" />

data() {
  return {
    inputValue: ''
  }
}

子组件<MyInput>关键代码：

<input :value="value" @input="$emit('input', $event.target.value)">

props:{
  value: String
}

 

vue的双向绑定如何实现？

1.解释v-model的作用:

在变量变化的时候，ui会变化。

用户改变ui的时候，数据也会变化

 

2.v-model 是 v-bind:value 和 v-on:input 的语法糖。