Vue2和Vue3如何在组件中使用V-model

Vue2

先看看下面这两个组件自己理解一下。

父组件

<template>
  <div class="home">
    <h3>输入的实时内容：{{ myValue }}</h3>
    <custom-model v-model="myValue"></custom-model>
  </div>
</template>
<script>
import CustomModel from './CustomModel'
export default {
  name: 'Home',
  components: {
    CustomModel,
  },
  data () {
    return {
      myValue: ''
    }
  },
}
</script>

子组件

<template>
  <!-- 自定义组件中使用v-mode指令 -->
  <input type="search" @input="changeInput" data-myValue="">
</template>

<script>
export default {
  name: 'CustomModel',
  // 当我们使用model的默认值的时候value作prop，input作event时，可以省略不写model。
  model: {
    prop: 'myValue', // 默认是value
    event: 'myInput', // 默认是input
  },
  props: {
    // 接收string和number类型的值，
    // 注意不能是写成字符串["String","Number"],因为此时它们是构造器，是全局变量
    myValue: [String, Number],
  },
  methods: {
    changeInput ($event) {
      // 向上派发myInput事件，这样model监听myInput才有意义：当输入字符时触发input事件，
      // 进而派发触发自定义的myInput事件，然后model监听myInput，就实现了数据绑定
      this.$emit('myInput', $event.target.value)
    },
  }
}
</script>

我们都知道，一个组件上的 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"
/>

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