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="show-panel">{{ inputVal }}</div>

为<input>标签添加了value属性以及input事件，当我们在输入内容时，触发input事件，将<input>标签中的值赋给inputVal变量。

原生js模拟v-model的实现

<input id="input" type="text" oninput="handleInput()">
<div class="show-panel"></div>

let inputEle = document.querySelector('#input')
let showPanelEle = document.querySelector('.show-panel')
let inputVal = ''
// 将inputVal的值赋给input标签的value属性
inputEle.value = inputVal

function handleInput() {
  // 获取input标签的value属性值，并赋给inputVal、showPanelEle
  inputVal = inputEle.value
  showPanelEle.innerHTML = inputEle.value
}

最开始将inputVal的值赋给<input>标签的value属性，当输入内容时，触发input事件，获取<input>标签中最新的value属性值，并将输入值赋给inputVal变量和showPanelEle元素。

结合上面v-model的实现，可以看出v-model利用了表单元素（<input>）的value属性和input事件，通过定义一个变量inputVal，并将inputVal赋给表单元素的value属性，当触发表单元素的input事件时将最新的输入值更新给变量inputval，进而实现双向绑定。

自定义组件使用v-model

我们知道表单元素本身具有input事件，在输入内容时，可以触发，但是在vue中，对于自定义组件，当自身没有input事件时，还可以使用v-model吗？

答案是可以使用的，对于自定义组件，当我们使用v-model后，组件会自动多了一个value属性值和名为input的自定义事件（这一切都是vue帮我们实现的），具体如下：

如下是一个HelloWorld.vue组件：

// HelloWord.vue
<template>
  <div>
    <h1>{{ value }}</h1>
    <button @click="handleClick">点击更新文本</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    handleClick() {
      this.$emit('input', 'Hi, Vue')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

我们在使用HelloWorld.vue组件时候用了v-model

<hello-world v-model="inputVal"></hello-world>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  data() {
    return {
      inputVal: 'hello, v-model'
    }
  }
}
</script>

我们在HelloWorld.vue中可以获取一个名为value的属性，当我们需要改变该属性值时，通过触发一个名为input的自定义事件即可，这就是在自定义组件中使用v-model的方法。

效果如下：

如果不使用v-model还想达到相同的效果，我们需要这样做：

<hello-world :value="inputVal" @input="handleInput"></hello-world>

import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'app',
  components: {
    HelloWorld
  },
  data() {
    return {
      inputVal: 'hello, v-model'
    }
  },
  methods: {
    handleInput(val) {
      this.inputVal = val
    }
  }
}

综上所述，我们可以知道v-model是一种语法糖，它利用了标签（表单元素、自定义元素）的value属性和input事件（对于表单元素，input事件是本身原有的事件，对于自定义组件，input事件就是一个名为input的自定义事件）实现了双向绑定。

参考文献：

[1] 表单输入绑定
[2] Vue之自定义组件的v-model