快捷導(dǎo)航

3分鐘帶你快速認(rèn)識Vue3中的v-model

更新時間：2022年11月14日 15:44:22 作者：米西呀

model在vue里面實現(xiàn)雙向綁定,通過父節(jié)點向子節(jié)點傳遞參數(shù),子節(jié)點通過操作再回傳給父節(jié)點的變量,有點像prop和$emit組合使用,下面這篇文章主要給大家介紹了關(guān)于Vue3中v-model的相關(guān)資料,需要的朋友可以參考下

1：什么是 v-model

v-model 是 Vue 內(nèi)置的指令

作為屬性接收一個變量（不能是常量）綁定到普通組件和自定義組件中

// 作為普通組件的屬性, 只有作為表單內(nèi)的元素屬性時才會生效 如：  input  、radio 、checkbox
<template>
	<input v-model='value' />
</template>

// 作為自定義組件的屬性
<template>
	<son-component v-model='value'></son-component>
</template>

v-model 同時做了兩件事情：屬性綁定和自定義事件綁定

// 內(nèi)置組件
<template>
	<input  type='text' v-model='value' /> 
	// 相當(dāng)于
	<input type='text'  :value='value' @input='value = $event.target.value'  />
</template>

// 自定義子組件
<template>
	<son-component v-model='value'></son-component>
	// 相當(dāng)于
	<son-component :modelValue='value' @update:modelValue='value = $event'></son-component>
<template>

v-model 綁定在自定義組件上時，我們需要手動去接收

// 自定義組件
export default{ 
	props: ['modelValue'], // 默認(rèn)名稱為 modelValue
	emits: ['update:modelValue'] // Vue3 新增 emits， 用于接收父組件傳遞的自定義事件
}

2：v-model 的擴(kuò)展

1：自定義名稱

v-model 默認(rèn)綁定的屬性名為：modelValue
v-model 默認(rèn)綁定的事件名為：update:modelValue

// 所以我們需要使用 modelValue 和 update:modelValue 來接收
export default {
	props: ['modelValue'],
	emits: ['update:modelValue']
}

我們可以自定義 v-model 綁定的名稱

// 父組件
<template>
	<son-component v-model:msg='msg'></son-component> // 使用 v-model:name 來自定義名稱
</template>

// 子組件
export default {
	props: ['msg'],
	emits: ['update:msg']
}

注意：以上是 Vue3 中接收 v-model 的方法， Vue2 需要使用 model 來接收

2：內(nèi)置修飾符

v-model 的修飾符能夠?qū)壎ǖ臄?shù)據(jù)做特定處理
Vue 中有內(nèi)置的修飾符，如：.number 、.trim 、.lazy
v-model.number ： v-model 綁定在表單組件中不會出現(xiàn)數(shù)值類型，numer 可以將綁定的字符串轉(zhuǎn)換為數(shù)值
v-model.trim ：去掉綁定數(shù)據(jù)左右兩側(cè)的空格
v-model.lazy ：表單組件綁定時生效，從原來綁定的 input 高頻率觸發(fā)事件改為 blur 低頻率觸發(fā)事件來提高性能

<template>
	<input type='text' v-model.number='value' /> // 將輸入的 string 類型轉(zhuǎn)換為 number 類型
	input 本身不管輸入的是數(shù)字還是單詞等都是 string 類型
</template>

3：自定義修飾符

Vue3 中可以通過 v-model.name 自定義修飾符
自定義的修飾符需要在子組件中用 props 接收 modelModifiers 對象，這個對象下面會有自定義屬性，值為 true

// 沒有重命名v-model，僅添加自定義修飾符
<template>
	<son-component  v-model.a='msg' />
</template>

export default {
	props:['modelValue', 'modelModifiers'],
	emits: ['update:modelValue'],
	created() {
		console.log(this.modelModifiers.a) // 值為 true
	}
}

如果自定義了 v-model 的名稱，那么 modelModifiers 要改為 name + Modifiers

// 重命名 v-model ，并且添加自定義修飾符
<template>
	<son-component v-model:msg.a='msg' />
</template>

export default {
	props:['msg', 'msgModifiers'],
	emits: ['update:msg'],
	created() {
		console.log(this.msgModifiers.a) // 值為 true
	}
}

注意：Vue3 中取消了 v-bind 中的 .sync 修飾符

補(bǔ)充：多個 v-model 使用

在 vue3 一個組件可以使用多個 v-model ，統(tǒng)一了 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" />

實現(xiàn)多個數(shù)據(jù)雙向綁定完整實例：

//父組件代碼
<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 選項，你發(fā)現(xiàn)了嗎？

vue3 組件的自定義事件需要定義在 emits 選項中，只要是自定義事件，就需要添加在 emits 中，否則會有警告。它的優(yōu)點：