vue3中的v-model

1.  Vue3的v-model:

vue3.0中对如何在自定义组件上使用v-model进行了重大升级，此文主要列出了变化要点，并给出了示例代码。

2 . V-model  具体的变化内容:

    -组件上单个v-model           :    属性以及事件的默认名称变了

   -组件上单个v-model别名     :    v-bind 的 .sync 修饰符和组件的 model 选项被移除了，取而代之                                                       的是 v-model 参数

   -组件上多个v-model            :    支持同一组件同时设置多个 v-model

   -组件上v-model自定义修饰符  :      支持自定义 v-model 修饰符

3.V-model 的历程

Vue 2.0

v-model 只能绑定在组件的 value 属性上。

<son-com v-model="msg" />

也就是说在son-com这个的组件的内部，你只能通过一个名为value的属性来获取父组件中传入的msg的值。

{
    props:['value']}

这一点其实不太友好：value这个词太没有语义了。所以在后续版本中增加可修改属性名的功能。

vue 2.2

在此版本中，组件在定义可以写 model 项，开发者通过这个设置和 v-model 关联的属性和事件。

具体做法是在组件内部定义一个model项，其中prop用来设置v-model中默认的value的别名， event用来设置v-model中默认的input事件的别名

Vue.component('SonCom',{
    template: `    <div>{
  {checked}} <button @click="$emit('change', false)">设成false</div>    `  model: {
      prop: 'checked', // 默认叫value    event: 'change' // 默认叫input    }}

vue 2.x

一个组件上只能一个v-model。

当然，你也可以用v-bind.sync来达成多个数据项双向绑定的效果，代码如下：

<div id="app">   <h2>父组件</h2>    {
  {a}} - {
  {b}}   <son-com v-bind:a.sync="a" v-bind:b.sync="b"></son-com> </div> <script> Vue.component('S