vue2 vs vue3 v-model 的语法糖

<input v-model="str" />

// 等同于 

<input :value="str" @input="str = $event.target.value" />

通过上面的代码，我们可以分析得出，也就是说：<font color=red> v-model="str" 是 :value="str" @input="str = $event.target.value" 的缩写。</font>

解释：

$event 指代当前触发的事件对象。

$event.target 指代当前触发的事件对象的dom

$event.target.value 就是当前dom的value值

在@input方法中，value => str

在:value中：str => value

如此，形成了一个闭环，也就是所说的数据的双向绑定。

自定义组件怎么实现v-model

<my-component v-model="price"></my-component>

我们可以根据规则来拆解

<my-component :value="price" @input="price = $event.target.value"></my-component>

那么我们在还原组件的封装

<template>
  <div>
    <input type="text" :value="value" @input="$emit('input', $event.target.value)">
  </div>
</template>
<script>
export default {
 props: {
    value: String
  }
 }
 </script>

看到上面的代码或许你就恍然大悟了，他又回到了，我们之前学过的 父子组件的来回传值。

细心的同学可能会发现，我们 props 里面的值是 value 那我能不能随便定义一个变量呢？还有 $emit()里面传入的事件值是input我能不能也随便定义一个事件呢？

当我们在一个自定义组件上使用v-model并不能实现双向绑定，因为自定的组件并没有默认的value和input事件，在使用时，我们需要按照上面那样显式的去声明定义这些东西。这时，model选项就派上用场了，在定义组件的时候，指定prop的值和监听的事件。

组件的用法是不变的，子组件可以这么写

<template>
  <div>
    <input type="text" :value="xxxx" @input="$emit('xxxx', $event.target.value)">
  </div>
</template>

<script>
export default {
    model:{
        prop:'xxxx',
        event:'xxxx' // 代表自定义的事件名称
    }

    props: {
        xxxx: String // 代表自定义的变量名称
     }
}
</script>

这就是vue 的 model 选项的作用。

以上是vue2.0的v-model语法糖讲解，vue3.0是怎么用的呢？

其实vue3的v-model跟vue2的使用区别不大，只是跟vue2的 <font color=red>sync</font> 修饰符进行了合并，所以在vue3中就移除了 <font color=red>sync</font> 修饰符。下面我们看看怎么在 <font color=red>composition api</font>
中怎么写 <font color=red>v-model</font>

// 自定义一个TestModel组件
<template>
 <div>
   <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
 </div>
</template>

<script>
export default {
 props: {
   modelValue: {
     type: String
   }
 }
}
</script>

在vue3中默认的不在是value 而是modelValue

然后在其他页面使用

<template>
  <h1>vue3中使用v-model {{msg}}</h1>
  <testModel v-model="msg"></testModel>
  <!-- 等同于下面语法 默认传入一个modelValue 然后子组件接收这个modelValue -->
 <testModel :modelValue="msg" @update:modelValue="msg = $event"></testModel>
</template>

<script>
import { ref } from 'vue';
import testModel from './TestModel.vue';
export default {
  components: {
    testModel
  },
  setup(){
    const msg = ref('')
    return { msg }
  },
}
</script>

有的小伙伴可能有疑问，如果我不想用 modelValue 怎么办呢？当然也可以写成其他的名字

// 父组件
<template>
  <h1>vue3中使用v-model {{msg}}</h1>
  <testModel v-model:msg="msg"></testModel>
</template>

子组件接收的props就要改成msg了

// 子组件
<template>
  <div>
    <input type="text" :value="msg" @input="$emit('update:msg', $event.target.value)" />
  </div>
</template>

<script>
export default {
  props: {
    msg: {
      type: String
    }
  }
}
</script>

当然提到双向绑定，你可能第一时间就会想到表单元素，双向绑定不一定是表单元素，你可以定义各种各样的组件，比如通过click事件改变父组件的值

// 父组件
<template>
  <div>{{count}}</div>
  <testModel v-model:count="count"></testModel>
</template>

<script>
export default {
  components: {
    testModel
  },
  setup(){
    const count = ref(0)
    return { count }
  }
}
</script>



// 子组件
<template>
  <!-- 一定是+1 不是+=1 或者++ 否则vue会触发一个不让子组件直接改变props的警告 -->
  <div @click="$emit('update:count', count + 1)">click me count + 1！</div>
</template>

<script>
export default {
  props: {
    count: {
      type: Number
    }
  }
}
</script>