亲宝软件园·资讯

展开

3分钟带你快速认识Vue3中的v-model

米西呀 人气:0

1:什么是 v-model

v-model 是 Vue 内置的指令

作为属性接收一个变量(不能是常量)绑定到普通组件和自定义组件中

// 作为普通组件的属性, 只有作为表单内的元素属性时才会生效 如:  input  、radio 、checkbox
<template>
	<input v-model='value' />
</template>
// 作为自定义组件的属性
<template>
	<son-component v-model='value'></son-component>
</template>

v-model 同时做了两件事情:属性绑定和自定义事件绑定

// 内置组件
<template>
	<input  type='text' v-model='value' /> 
	// 相当于
	<input type='text'  :value='value' @input='value = $event.target.value'  />
</template>
// 自定义子组件
<template>
	<son-component v-model='value'></son-component>
	// 相当于
	<son-component :modelValue='value' @update:modelValue='value = $event'></son-component>
<template>

v-model 绑定在自定义组件上时,我们需要手动去接收

// 自定义组件
export default{ 
	props: ['modelValue'], // 默认名称为 modelValue
	emits: ['update:modelValue'] // Vue3 新增 emits, 用于接收父组件传递的自定义事件
}

2:v-model 的扩展

1:自定义名称

v-model 默认绑定的属性名为:modelValue
v-model 默认绑定的事件名为: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:内置修饰符

v-model 的修饰符能够对绑定的数据做特定处理
Vue 中有内置的修饰符,如:.number 、.trim 、.lazy
v-model.number : v-model 绑定在表单组件中不会出现数值类型,numer 可以将绑定的字符串转换为数值
v-model.trim : 去掉绑定数据左右两侧的空格
v-model.lazy : 表单组件绑定时生效,从原来绑定的 input 高频率触发事件改为 blur 低频率触发事件来提高性能

<template>
	<input type='text' v-model.number='value' /> // 将输入的 string 类型转换为 number 类型
	input 本身不管输入的是数字还是单词等都是 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 修饰符

补充:多个 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 中,否则会有警告。它的优点:

总结

1:v-model 作为指令可以绑定在内置组件和自定义组件上

2:相当于绑定了 :modelValue 和 @update:modelValue ,需要在子组件中接收

3:v-model:name 重命名

4:v-modle.name 自定义修饰符,使用 props 的 Modifiers 接收

加载全部内容

相关教程
猜你喜欢
用户评论