快捷導(dǎo)航

一文秒懂Vue3的v-model

更新時(shí)間：2023年02月07日 15:10:12 作者：米西呀

v-model 是 Vue 內(nèi)置的指令作為屬性接收一個(gè)變量（不能是常量）綁定到普通組件和自定義組件中，本文給大家介紹Vue3的v-model示例代碼，感興趣的朋友跟隨小編一起看看吧

1：什么是 v-model

v-model 是 Vue 內(nèi)置的指令
作為屬性接收一個(gè)變量（不能是常量）綁定到普通組件和自定義組件中

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

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

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

// 內(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 綁定在自定義組件上時(shí)，我們需要手動(dòng)去接收

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

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

1：自定義名稱(chēng)

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

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

我們可以自定義 v-model 綁定的名稱(chēng)

// 父組件
<template>
	<son-component v-model:msg='msg'></son-component> // 使用 v-model:name 來(lái)自定義名稱(chēng)
</template>

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

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

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

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

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

3：自定義修飾符

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

// 沒(méi)有重命名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 的名稱(chēng)，那么 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 修飾符

總結(jié)

1：v-model 作為指令可以綁定在內(nèi)置組件和自定義組件上
2：相當(dāng)于綁定了 :modelValue 和 @update:modelValue ，需要在子組件中接收
3：v-model:name 重命名
4：v-modle.name 自定義修飾符，使用 props 的 Modifiers 接收

到此這篇關(guān)于一文秒懂認(rèn)識(shí)Vue3的v-model的文章就介紹到這了,更多相關(guān)Vue3的v-model內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: