「小墨是前端」专注分享前端技术，推荐优秀的开源项目，展示Github、Gitee上的创意作品，带你深入前端底层，一起成长。

还在为Vue 2的v-model限制而苦恼？Vue 3 的 v-model 彻底革新，带来了更强大的双向绑定体验！想让你的代码更简洁、更灵活、更高效吗？快来一起探索Vue 3 v-model 的高级用法，让你的开发之旅更加丝滑！

Vue2 v-model的那些痛点，你中招了吗？

在 Vue 2 中，v-model虽然好用，但也存在一些限制：自定义组件需要手动绑定value prop 和 input 事件；.sync 修饰符不够直观；无法同时绑定多个属性。这些痛点，你是否也遇到过？

Vue3 v-model：焕然一新，告别旧时代！

Vue 3 的 v-model 解决了这些问题，并带来了更多惊喜：

• modelValue 和 update:modelValue： 自定义组件的默认绑定属性和事件更名，逻辑更清晰。告别 value 和 input ，拥抱新的规范！
• v-model:propName： 直接绑定任意 prop，无需 .sync 修饰符，代码更简洁易懂！
• 多 v-model 绑定： 一个组件，多个绑定，再也不用为复杂数据同步而烦恼！

<my-component v-model:name="name" v-model:age="age"></my-component>

就是这么简单！

自定义修饰符：打造你的专属v-model！

Vue3 v-model 最令人兴奋的特性之一就是自定义修饰符！你可以根据项目需求，打造专属的 v-model 功能。

想象一下，你需要一个输入框，自动将输入内容转换为大写。只需自定义一个 uppercase 修饰符：

// MyInput.vue
<template>
  <input :value="modelValue" @input="emitValue">
</template>

<script>
export default {
  props: ['modelValue', 'modelModifiers'],
  methods: {
        emitValue(e) {
          let value = e.target.value;
          if (this.modelModifiers.uppercase) {
            value = value.toUpperCase();
          }
          this.$emit('update:modelValue', value);
        }
      }
}
</script>

然后在父组件中使用

<my-input v-model.uppercase="inputValue"></my-input>

兼容性提示：从 Vue 2 升级要注意！

如果你正在从 Vue 2 升级到 Vue 3，需要注意 .sync 修饰符已经被移除，需要替换为 v-model:propName 的形式。

总结：拥抱 Vue 3v-model，提升开发效率！

Vue 3 的 v-model 更强大、更灵活、更易用。掌握这些高级用法，不仅能让你的代码更简洁优雅，还能显著提升开发效率。

创作不易，欢迎大家关注、点赞、收藏、转发！我会继续分享高质量的干货和前沿的技术，给大家提供更多有价值的内容！