v-model的理解

v-model的理解

1、v-model实现原理
2、自定义组件使用v-model

v-model原理

在vue中，对<input>标签使用v-model指令可以实现数据的双向绑定；其原理是利用<input>标签的value属性和input事件；

下面是我们使用v-model的方式：

<input v-model="inputVal" type="text">
<div class="show-panel">{
  { inputVal }}</div>

export default {
   
  data() {
   
    return {
   
      inputVal: ''
    }
  }
}

效果如下：

为了更好的理解v-model的原理，我们先模拟v-model的实现：

利用vue模拟v-model的实现：

<input :value="inputVal" type="text" @input="inputVal = $event.target.value">
<div class<