你問的是 v-model（不是 v-modal 吧 😄），我來幫你梳理一下 Vue2 和 Vue3 的 v-model 區別。

---

🔹 Vue 2 中的 v-model

1. 語法

   <input v-model="msg">
   

   • v-model 本質上是 語法糖，等價于：

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

2. 在組件中的用法

   • 默認情況下，v-model 會綁定到 value prop，并監聽 input 事件：

     <!-- 父組件 -->
     <my-input v-model="msg"></my-input><!-- 子組件 -->
     <template><input :value="value" @input="$emit('input', $event.target.value)">
     </template>
     <script>
     export default {props: ['value']
     }
     </script>
     

   • 如果想改 prop 名和事件名，需要用 model 選項：

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

     父組件就可以寫：

     <my-checkbox v-model="isChecked" />
     

---

🔹 Vue 3 中的 v-model

1. 語法

   • 仍然是語法糖，但和 Vue2 不同：

     <input v-model="msg">
     

     等價于：

     <input:modelValue="msg"@update:modelValue="msg = $event"
     >
     

2. 在組件中的用法

   • 默認 prop 變成了 modelValue，事件名變成了 update:modelValue：

     <!-- 父組件 -->
     <my-input v-model="msg"></my-input><!-- 子組件 -->
     <template><input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
     </template>
     <script>
     export default {props: ['modelValue']
     }
     </script>
     

3. 多 v-model 支持

   • Vue3 可以在一個組件上用多個 v-model，通過參數區分：

     <user-name v-model:first-name="first" v-model:last-name="last" />
     

     子組件寫法：

     export default {props: ['firstName', 'lastName'],emits: ['update:firstName', 'update:lastName']
     }
     

4. 修飾符傳遞

   • Vue2 的修飾符（如 .trim、.lazy）只能在內置組件里生效；

   • Vue3 可以讓自定義組件接收修飾符：

     <my-input v-model.trim="msg" />
     

     子組件里通過第二個參數獲取：

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

---

🔑 總結對比

特性	Vue2	Vue3
默認 prop	value	modelValue
默認事件	input	update:modelValue
自定義 prop+事件	model: { prop, event }	直接用 v-model:xxx
多個 v-model	? 不支持	? 支持
修飾符傳遞	? 不支持（僅限原生表單）	? 支持傳遞到子組件

---