Vue2里的model到底怎么用？和v-model有啥区别？

terry 6小时前阅读数 7 #Vue

文章标签 model

刚接触Vue2的时候,不少同学会把组件里的model选项和v-model搞混，甚至疑惑“model选项到底能解决啥实际问题”，比如写自定义表单组件时，想让v-model的绑定更贴合业务语义，或者遇到复选框、开关这类组件，用默认的value和input总觉得“别扭”……今天就把Vue2里model的用法、和v-model的关系这些关键点拆明白，帮你彻底理清逻辑～

Vue2的model选项是干啥的？

先看Vue2组件里model选项的基本结构：它是一个对象，包含prop和event两个属性，比如这样写：

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

这里的prop是父组件通过v-model传给子组件的值对应的属性名；event是子组件要触发的、用来更新父组件v-model绑定值的事件名。

举个默认情况对比：如果不用model选项，组件上的v-model默认对应prop是value，事件是input，也就是说，父组件写<MyComponent v-model="parentValue" />，等价于<MyComponent :value="parentValue" @input="parentValue = $event" />。

但如果加了model选项（像上面的checked和change），此时v-model的逻辑就变成：父组件的v-model绑定值，会传给子组件的checked prop；子组件通过触发change事件（带着新值），就能更新父组件的绑定值。

model选项和v-model啥关系？

很多同学疑惑“v-model不是双向绑定语法糖吗？和model选项咋勾连的？” 得先明确：v-model是语法糖，model选项是给组件自定义v-model逻辑的“开关”。

举个生活例子：默认情况下，v-model像是“规定死的快递流程”——父组件发“包裹”（值）走“value通道”（prop），子组件收到后，要回传新值必须走“input快递车”（事件），但业务里可能需要更灵活的“通道名”，比如复选框组件，用“value”传选中状态太笼统，换成“checked”更直观；回传事件用“change”比“input”更符合用户操作逻辑（点复选框是“change”动作），这时候model选项就像“修改快递流程规则”，把通道名改成你想要的。

代码层面看更直接：

不用model选项时，组件支持v-model的写法：

<!-- 子组件 MyInput -->
<template><input :value="value" @input="$emit('input', $event.target.value)" /></template>
<script>
export default { props: { value: String } }
</script>
<!-- 父组件 -->
<MyInput v-model="username" /> 
<!-- 等价于 <MyInput :value="username" @input="username = $event" /> -->

用model选项自定义后：

<!-- 子组件 MyCheckbox -->
<template><input type="checkbox" :checked="checked" @change="$emit('change', $event.target.checked)" /></template>
<script>
export default {
  model: { prop: 'checked', event: 'change' },
  props: { checked: Boolean }
}
</script>
<!-- 父组件 -->
<MyCheckbox v-model="isAgree" /> 
<!-- 等价于 <MyCheckbox :checked="isAgree" @change="isAgree = $event" /> -->

能发现吧？v-model的“语法糖本质”没变，但model选项让语法糖对应的prop和事件名可以按需定制，适配不同组件的语义需求。

实际开发中啥时候用model选项？

最典型的场景是表单类自定义组件，尤其是那些“值”的语义和默认value不匹配的组件，比如复选框、单选框、开关、评分组件等。

拿开关组件举例：产品需要一个“开/关”切换的按钮，状态用“on/off”描述比“value”更直观，这时候用model选项定制prop和事件，代码可读性直接拉满：

<!-- 子组件 CustomSwitch -->
<template>
  <button @click="toggleStatus">
    {{ isOn ? '开' : '关' }}
  </button>
</template>
<script>
export default {
  model: {
    prop: 'isOn', // v-model绑定的值传给isOn
    event: 'toggle' // 子组件触发toggle事件更新父组件值
  },
  props: {
    isOn: { type: Boolean, default: false }
  },
  methods: {
    toggleStatus() {
      this.$emit('toggle', !this.isOn) // 触发toggle事件，带新状态
    }
  }
}
</script>
<!-- 父组件使用 -->
<template>
  <div>
    <p>开关状态：{{ switchStatus }}</p>
    <CustomSwitch v-model="switchStatus" />
  </div>
</template>
<script>
export default {
  data() {
    return { switchStatus: false }
  }
}
</script>

这段代码里,父组件的switchStatus通过v-model传给子组件的isOn prop；子组件点击按钮时，触发toggle事件把新状态（!isOn）传给父组件，父组件的switchStatus就自动更新了，整个过程中，“isOn”和“toggle”的命名完全贴合“开关”的业务语义，团队协作时别人看代码一眼就懂，比用默认的value和input友好太多。

再比如评分组件：用户选几颗星（1 - 5），用“score”当prop，“rate”当事件名，比value和input更清晰，这种“语义优先”的场景，就是model选项的主战场。

不用model选项，能实现类似v-model的双向绑定吗？

能！但过程会繁琐，且语义性差，核心逻辑是手动传递prop + 监听事件。

比如不用model选项,实现开关组件的双向绑定：

<!-- 子组件 CustomSwitch -->
<template>
  <button @click="toggleStatus">
    {{ isOn ? '开' : '关' }}
  </button>
</template>
<script>
export default {
  props: {
    isOn: { type: Boolean, default: false }
  },
  methods: {
    toggleStatus() {
      this.$emit('update:isOn', !this.isOn) // 触发update:isOn事件
    }
  }
}
</script>
<!-- 父组件 -->
<template>
  <CustomSwitch 
    :isOn="switchStatus" 
    @update:isOn="switchStatus = $event" 
  />
</template>
<script>
export default {
  data() { return { switchStatus: false } }
}
</script>

这种写法其实是Vue双向绑定的“原始形态”——父组件传prop，子组件通过触发update:propName事件通知父组件更新，但问题很明显：

父组件代码变啰嗦：每次用组件都要写:isOn和@update:isOn，不如v-model简洁；
语义性弱：“update:isOn”这种事件名不如“toggle”直观，团队协作时得额外解释；
通用性差：如果多个组件都要双向绑定，每个都得重复写这种结构，代码冗余。

而model选项的作用,就是把这种“手动双向绑定”的逻辑，通过v-model语法糖简化，同时让prop和事件名更贴合业务，一举解决繁琐和语义问题。

Vue2的model选项和Vue3的v-model有啥不同？

不少同学学完Vue2再看Vue3,会发现v-model的用法变了，这也能反推Vue2 model选项的设计逻辑。

Vue2中,一个组件只能有一个v-model（靠model选项定制）；而Vue3支持多个v-model，每个v-model对应不同的prop，且不需要写model选项，直接用defineModel宏（或手动写prop + update事件）就能实现，比如Vue3里可以这样写：

<!-- Vue3 组件 -->
<template><input v-model="modelValue" /></template>
<script setup>
const modelValue = defineModel() // 自动处理prop和update事件
</script>
<!-- 多个v-model -->
<MyComponent v-model:foo="fooValue" v-model:bar="barValue" />

对比Vue2,model选项是“给单个v-model换名字”的工具；Vue3则把v-model的灵活性拉满，不仅支持多v-model，还通过语法简化让双向绑定更自然，但Vue2的model选项也有价值——它把“组件双向绑定的原理”拆得很透：本质是“prop传值 + 事件通知更新”，model选项只是给这两个环节换了个“别名”，帮助我们理解v-model语法糖背后的逻辑。

所以学Vue2的model选项,不光是学一个API，更是理解组件通信中“双向绑定”的设计思路，这对后续学Vue3甚至其他框架的双向绑定逻辑，都有底层认知上的帮助。

绕了一圈,再帮你理清楚：Vue2的model选项是给组件的v-model“换肤”的——默认v-model绑定value和input，用model选项可以换成更语义的prop和事件名，让自定义组件的API更友好，实际开发里，表单类组件（复选框、开关、单选框等）最需要这种“语义化定制”，而model选项也帮我们把v-model背后“prop + 事件”的双向绑定逻辑，理解得更透彻。

要是你之前对model选项迷迷糊糊,现在再看自己写的自定义组件，是不是突然明白“原来还能这么优化”？下次遇到表单组件需求，不妨试试用model选项让代码更优雅～