在组件上使用 v-model

一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('input', $event.target.value)"
    >
  `
})

<custom-input v-model="searchInput"></custom-input>

但是像单选框、复选框等类型的输入控件可能会将 value 作为服务器提交时的内容，可以通过 mode 来指定其他属性

Vue.component('custom-checkbox', {
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('change', $event.target.checked)"
    >
  `
})

<custom-checkbox v-model="selectFramework"></custom-checkbox>

vue3

v-model prop 和事件默认名称已更改：

prop属性：value 变为-> modelValue； event事件：input 变为-> update:modelValue；

在 3.x 中，自定义组件上的 v-model 相当于传递了 modelValue prop 属性并接收抛出的 update:modelValue 事件：

Vue.component('custom-input', {
  props: ['modelValue'],
  template: `
    <input
      v-bind:value="modelValue"
      v-on:input="$emit('update:modelValue', $event.target.value)"
    >
  `
})

<custom-input v-model="searchInput"></custom-input>

v-model参数新增

若需要更改 model 名称，而不是更改组件内的 model 选项，那么现在我们可以将一个参数传递给 model：

Vue.component('custom-checkbox', {
  props: {
    checked: Boolean
  },
  template: `
    <input
      type="checkbox"
      v-bind:checked="checked"
      v-on:change="$emit('update:checked', $event.target.checked)"
    >
  `
})

<custom-checkbox v-model:checked="selectFramework"></custom-checkbox>

我们在上面的代码中可以看到 v-model 后面加上了冒号传递参数 :checked ，表示 v-model 绑定的是 checked 属性，在触发的事件通过 update:属性 指定，注意格式是固定的，必须 update: 加上属性名称。

sync修饰符删除

如果需要的话，父级可以监听该事件并更新本地 data property。例如：

<custom-checkbox :checked="selectFramework" @update:checked="selectFramework = $event"></custom-checkbox>

为了方便起见，我们可以使用 .sync 修饰符来缩写，如下所示：

<custom-checkbox :checked.sync="selectFramework"></custom-checkbox>

vue3 中 bind 的 .sync 修饰符和组件的 model 选项已移除，统统都要使用 v-model 作为代替；

<custom-checkbox v-model:checked="selectFramework"></custom-checkbox>

而且允许我们在自定义组件上使用多个 v-model。

<ChildComponent v-model:title="pageTitle" v-model:content="pageContent" />

<!-- 简写： -->

<ChildComponent
  :title="pageTitle"
  @update:title="pageTitle = $event"
  :content="pageContent"
  @update:content="pageContent = $event"
/>

之前是自定义组件上只能使用一个，现在改为可以使用多个了。