本篇文章主要介紹 v-model 在 Vue2 和 Vue3 中使用變化。
一、Vue2 中 v-model 的使用
v-model 是語法糖，本質還是父子組件間的通信。父子組件通信時有兩種方式：
- 父給子傳值：通過 props
- 子給父傳值：通過 Events up，使用 $emit 觸發事件。
1.1、父組件給子組件傳值
父組件代碼
<child :msg="msg" />
<script>
export default{ data(){ return{ msg:"父組件給子組件傳值" } } } </script>
子組件代碼
<template>
<div>
{{msg}}
</div>
</template>
<script> export default{ props:{ msg:{ type:String, default:"" } } } </script>
props 是單向數據流，子組件只能讀取，並不能修改 msg 。對象類型可以，但不建議修改。
1.2、父子組件雙向綁定
子組件同步一個數據的時候，子組件既要使用，還要修改這個數據，以前需要通過 props Down 和 Events Up 來實現。現為了方便，提供了特殊的語法糖 v-model 。
父組件代碼：
{{msg}}
<set-input v-model="msg" />
子組件 SetInput.vue 文件代碼
<template>
<div>
<input type="text" v-model="newValue">
</div>
</template>
<script>
export default { props:{ value:{ type:String, default:'' } }, computed:{ newValue:{ get:function(){ return this.value }, set:function(value){ this.$emit('input',value) } } } } </script>
v-model = "msg" 可以翻譯為：
:value="msg"
@input="msg=$events"
所以父組件的代碼可以翻譯為：
<set-input :value="msg" @input="msg=$events" />
在一個組件上，v-model 只能使用一次，如果想要對多個數據同步綁定，則可以使用.sync修飾符。
二、.sync修飾符
.sync 和 v-model 都是語法糖，本質還是父子組件間的通信。使用 .sync 修飾符實現父子組件多個數據雙向綁定。
因為 vue2 中組件只能定義一個 v-model，如果父子需要實現多個數據雙向綁定，就需要借助 .sync 修飾符。
.sync 使用原理：
<child-comp v-model="msg" :foo.sync="foo" />
//可翻譯為<child-comp
:value="msg" @input="msg=$event" :foo="foo" @update:foo="foo=$event" />
/*********** 一個完整的代碼示例 *************/
//父組件代碼
<child-comp v-model="msg" :foo.sync="foo" />
//子組件代碼
<template>
<div>
<input type="text" v-model="newFoo">
<input type="text" v-model="newValue">
</div>
</template>
<script>
export default { props:{ value:{ type:String, default:'' }, foo:{ type:String, default:"" } }, computed:{ newValue:{ get:function(){ return this.value }, set:function(value){ this.$emit('input',value) } }, newFoo:{ get:function(){ return this.foo }, set:function(value){ this.$emit('update:foo',value) } } } } </script>
三、Vue3.x 使用 v-model
vue2 中的 v-model 和 .sync 功能重疊，容易混淆，因此 vue3 做了統一，一個組件可以多次使用 v-model 。
3.1、vue 3 的v-model使用原理：
<child-comp v-model="msg" /> //可翻譯為 <child-comp :modelValue="msg" @update:modelValue="msg=$event" />
單個數據雙向綁定完整示例
//父組件代碼
<child-comp v-model="name" />
子組件代碼：
<template>
<input type="text" v-model="newValue">
</template>
<script> export default { props:{ modelValue:{ type:String, default:'' } }, computed:{ newValue:{ get:function(){ return this.modelValue }, set:function(value){ this.$emit('update:modelValue',value) } } } } </script>
vue3 使用特定的 modelValue ，避免 value 的占用，通過 update:modelValue 實現數據雙向綁定。值得注意的是，vue3 移除了 model 選項。
3.2、多個 v-model 使用
在 vue3 一個組件可以使用多個 v-model ，統一了 vue2 的 v-model 和 .sync 修飾符。
使用原理：
<child-comp v-model:name="name" v-model:age="age" />
//可翻譯為
<child-comp
:name="name" @update:name="name=$event" :age="age" @update:age="age=$event" />
實現多個數據雙向綁定完整實例：
//父組件代碼
<child-comp v-model:name="name" v-model:age="age" />
//子組件代碼
<template>
<div>
<input type="text" v-model="newName">
<input type="text" v-model="newAge">
</div>
</template>
<script>
export default { props:{ name:{ type:String, default:'' }, age:{ type:String, default:"" } }, emits:['update:name','update:age'], computed:{ newName:{ get:function(){ return this.name }, set:function(value){ this.$emit('update:name',value) } }, newAge:{ get:function(){ return this.age }, set:function(value){ this.$emit('update:age',value) } } } } </script>
需要注意的是 script 中多了一個 emits 選項，你發現了嗎？
vue3 組件的自定義事件需要定義在 emits 選項中，只要是自定義事件，就需要添加在 emits 中，否則會有警告。它的優點：
- 如果與原生事件相同名時，事件就會被觸發兩次，如果在 emits 選項中加入時，當作自定義事件處理，只會觸發一次。
- 更好地指示組件的工作方式。
- 可以校驗對象形式的事件。
四、總結
從 vue2.0 開始，組件上自定義 v-model 進行數據雙向綁定，不斷改進它的使用。過程如下：
<child-comp v-model="msg" />
4.1、vue2.0 可以翻譯為：
<child-comp :value="msg" @input="msg=$event" />
存在問題：v-model 和 value 有一個強綁定關系，如果子組件中有一個 input 原生標簽，此時就會影響原生標簽的 value 和 input 事件。
4.2、vue2.2版本
引入了 model 組件選項，允許開發者任意指定 v-model 的 props 和 event 。這樣就解決了 vue2.0 中的 v-model 和 value 的強綁定關系。但是還是存在一個問題，就是多個數據雙向綁定時，還是需要借助 .sync 修飾符。
4.3、vue3.x 版本
Vue3 可以翻譯為：
<child-comp :modelValue="msg" @update:modelValue="msg=$event" />
vue3 統一 使用 v-model 進行多個數據雙向綁定，廢除了 model 組件選項。
本篇文章的分享到這就要結束了，喜歡小編的歡迎點個關注！