vue2与vue3中的v-model语法糖

在vue2中

<input v-model="str" />

// 等同于 

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

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

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

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

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

在@input方法中，value => str

在:value中：str => value

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

现在咱们来还原组件的封装：

<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 选项的作用。

在vue3中

// 自定义一个TestModel组件
// 在vue3中默认的不在是value 而是modelValue
<template>
 <div>
   <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
 </div>
</template>

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

在要用的父组件中引入:

<template>
  <p>vue3中使用v-model {{msg}}</p>
  <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>


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

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

以上就是我对 v-model 语法糖的理解，要是大佬们觉得哪里不错，欢迎私信