Vue 2 中的 v-model和Vue3中的v-model - 指南

你问的是 v-model(不是 v-modal 吧 ),我来帮你梳理一下 Vue2 和 Vue3 的 v-model 区别


Vue 2 中的 v-model

  1. 语法

    • v-model 本质上是 语法糖,等价于:

  2. 在组件中的用法

    • 默认情况下,v-model 会绑定到 value prop,并监听 input 事件

      export default {
      props: ['value']
      }
    • 如果想改 prop 名和事件名,需要用 model 选项

      export default {
      model: {
      prop: 'checked',
      event: 'change'
      },
      props: ['checked']
      }

      父组件就可以写:


Vue 3 中的 v-model

  1. 语法

    • 仍然是语法糖,但和 Vue2 不同:

      等价于:

  2. 在组件中的用法

    • 默认 prop 变成了 modelValue,事件名变成了 update:modelValue

      export default {
      props: ['modelValue']
      }
  3. v-model 支持

    • Vue3 可以在一个组件上用多个 v-model,通过参数区分:

      子组件写法:

      export default {
      props: ['firstName', 'lastName'],
      emits: ['update:firstName', 'update:lastName']
      }
  4. 修饰符传递

    • Vue2 的修饰符(如 .trim.lazy)只能在内置组件里生效;

    • Vue3 可以让自定义组件接收修饰符:

      子组件里通过第二个参数获取:

      export default {
      props: ['modelValue'],
      emits: ['update:modelValue'],
      setup(props, { emit, attrs }) {
      console.log(attrs['v-model-modifiers']); // { trim: true }
      }
      }

总结对比

特性Vue2Vue3
默认 propvaluemodelValue
默认事件inputupdate:modelValue
自定义 prop+事件model: { prop, event }直接用 v-model:xxx
多个 v-model❌ 不支持✅ 支持
修饰符传递❌ 不支持(仅限原生表单)✅ 支持传递到子组件

posted @ 2025-08-27 12:30  yfceshi  阅读(23)  评论(0)    收藏  举报