Vue3双向绑定的坑坑死人了

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
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

Vue3双向绑定的坑 坑死人了

猜你喜欢

Vue3双向绑定的坑坑死人了