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', // 默认是valueevent: '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: `<inputv-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: `<inputtype="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: `<inputv-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: `<inputtype="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"
/>

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