v-model

提示

这里只记录 “组件 v-model” 的使用，关于原生表单的 v-model 请参阅 表单输入绑定。

v-modal 的本质

v-model 等同于 :value="val" @input。

props 默认为 value，event 默认为 input。

提示

想要修改 v-model 定制的 props 和 event，可以通过 model 选项来实现。

Vue.component('my-checkbox', {
  model: {
    prop: 'checked',
    event: 'change',
  },
  props: {
    checked: {
      type: Number,
      default: 0,
    },
  },
})

用法与正常使用时无异：

<my-checkbox v-model="foo"></my-checkbox>

<!-- 相当于 -->
<my-checkbox :checked="foo" @change="val => { foo = val }"></my-checkbox>

props

emit

.sync 修饰符

通常，双向绑定会使用 “v-model”，还有另外一种写法实现双向绑定：

props -> 'title',
emit -> 'update:title'

使用的话，就像这样：

<text-document
  v-bind:title="doc.title"
  v-on:update:title="doc.title = $event"
></text-document>

使用 update:xxx 这个写法的好处就是，可以使用 .sync 修饰符来简化语法：

<text-document v-bind:title.sync="doc.title"></text-document>

提示

在 vue2 中，当需要 “多个 v-model” 时，可以使用 v-bind.sync 代替。