Vue3双向绑定的坑 坑死人了
vue3 使用特定的 modelValue ,避免 value 的占用,通过 update:modelValue 实现数据双向绑定。值得注意的是,vue3 移除了 model 选项。vue3 组件的自定义事件需要定义在 emits 选项中,只要是自定义事件,就需要添加在 emits 中,否则会有警告。在 vue3 一个组件可以使用多个 v-model ,统一了 vue2 的 v-model 和 .
·
1.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 选项。
1.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 选项中加入时,当作自定义事件处理,只会触发一次。
- 更好地指示组件的工作方式。
- 可以校验对象形式的事件。
作者:前端人_倩倩
链接:https://juejin.cn/post/7025773427260653599
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
更多推荐
已为社区贡献4条内容
所有评论(0)