vue2迁移到vue3，v-model的调整

原创已于 2026-01-12 12:02:22 修改 · 1.4k 阅读

13 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #javascript #前端 #uniapp #uni-app

于 2024-04-30 15:24:33 首次发布

vue 同时被 2 个专栏收录

16 篇文章

订阅专栏

JavaScript

15 篇文章

订阅专栏

本文档介绍了从Vue2迁移到Vue3时，v-model的使用方式变化，包括prop和事件名称的更新，如value -> modelValue，input -> update:modelValue。v-bind的.sync修饰符和组件model选项已被移除，由v-model参数替代。同时，现在支持在同一组件上使用多个v-model绑定，并可以创建自定义v-model修饰器。文章提供了代码示例和迁移调整的详细说明。

项目从vue2迁移到vue3，v-model不能再使用了，需要如何调整？

下面只提示变化最小的迁移，不赘述vue2和vue3中的常规写法。

vue2迁移到vue3，往往不想去调整之前的代码，以下就使用改动较小的方案进行调整。

In terms of what has changed, at a high level:

BREAKING: When used on custom components, v-model prop and event default names are changed:
- prop: value -> modelValue;
- event: input -> update:modelValue;
BREAKING: v-bind's .sync modifier and component model option are removed and replaced with an argument on v-model;
NEW: Multiple v-model bindings on the same component are possible now;
NEW: Added the ability to create custom v-model modifiers.

For more information, read on!

以上文档来自v-model | Vue 3 Migration GuideGuide on migrating from Vue 2 to Vue 3https://v3-migration.vuejs.org/breaking-changes/v-model.html

翻译结果：

就发生的变化而言，在高水平上：
BREAKING：在自定义组件上使用时，v模型道具和事件默认名称会发生更改：
prop:value->modelValue；
event:input->update:modelValue；
BREAKING：v-bind的.sync修饰符和组件模型选项被删除，并替换为v-model上的一个参数；
新功能：现在可以在同一组件上进行多个v模型绑定；
新增：增加了创建自定义v型模型修改器的功能。
有关更多信息，请继续阅读！

下面看代码调整：

简单写一个例子（vue2）：

<template>
    <view @click="onAdd">
        {{ value }}
    </view>
</template>
<script>
export default {
    props: {
        value: Number
    },
    methods: {
        onAdd(){
            this.$emit('input', this.value + 1)
        }
    }
}
</script>

上面改成(vue3)

<template>
    <view @click="onAdd">
        {{ modelValue }}
    </view>
</template>
<script>
export default {
    props: {
        modelValue: Number
    },
    methods: {
        onAdd(){
            this.$emit('update:modelValue', this.value + 1)
        }
    }
}
</script>

下面将支出vue2迁至vue3需要修改的地方，见下图：