用于原生标签

在 Vue，经常会使用 v-model 实现表单的双向数据绑定功能。一般用于 input、textarea、select标签上，获取它们的值。

实际上，v-model只是一个语法糖，做了两个操作：

• v-bind 绑定一个 value 属性

• v-on 指令给当前元素绑定 input 事件

例如：

<input v-model='something'>

就相当于：

<input v-bind:value="something" v-on:input="something = $event.target.value">

用于Vue组件身上

当 v-model 用在vue组件身上时，其实和上面差不多，也就是会自动给子组件绑定一个 value 属性，以及一个input方法。

例如：

<Son v-model="name"></Son>

相当于：

<Son :value='name' @input='xxx'></Son>

子组件中：

<template>
  <div class="son">
    这里是子组件
    {{ value }}
    <button @click="changeName">修改value</button>
  </div>
</template>
<script>
  export default {
    props: ['value'],
    methods: {
      changeName () {
        this.$emit('input', 'xxx')
      }
    }
  }
</script>

参考文章链接

Vue.js组件中v-model的使用 (opens new window)
Vue 在组件上使用 v-model (opens new window)