Vue2的v-model和Vue3的v-model区别

前言:单向数据流,父组件传给子组件的数据,子组件只能展示,不能修改,如果需要修改则需要emit事件让父组件修改

自定义组件的v-model,实际就是传递值和接收一个事件的简写。

先看官方文档

Vue2的v-model和Vue3的v-model区别_第1张图片

总结来说就是传递下去一个值,接收的一个事件,有些时候,一些组件并不是通过input来进行触发事件。也就是说valueinput事件在大多数情况下能够适用,但是存在value另有含义,或者不能使用input触发的情况,这时候我们就不能使用v-model进行简写了。就比如说选择框,绑定的值是checked而不是value,接收事件不是input而是change。为了解决这个问题,尤雨溪在Vue2.2中,引入了model组件选项,也即是说你可以通过model来指定v-model绑定的值和属性。

我们有封装组件的需求而且需要将子组件的数据随请求发送。我们希望数据定义在父组件,然后子组件改变父组件也一起改变

 Vue2的v-model和Vue3的v-model区别_第2张图片Vue2的v-model和Vue3的v-model区别_第3张图片

但是这样的话写起来很麻烦,而且v-model只能绑定一个值,这样的话我的组件封装不是只能改变一个值了,这样好像也不符合开发。

于是乎

Vue2的v-model和Vue3的v-model区别_第4张图片

 .sync和v-model类似,就是传递值和接收事件的简写。这样的话我们就可以不用写model了。直接告诉我更新那个值

如果绑定多个值我们可以传递一个对象下去,使用computed去简写更新,不用每个值都触发一次

Vue2的v-model和Vue3的v-model区别_第5张图片

Vue2的v-model和Vue3的v-model区别_第6张图片

 又是v-model又是.sync记不住啊,vue3又删除了.sync

我们通过上面知道vue2.x中既然v-model的主要原因是由于valueinput事件可能另有它用,那么我们可不可以直接使用另外的属性和方法,而不需要去通过model进行定义。vue3中就实现了这个功能,v-model绑定的不再是value,而是modelValue,接收的方法也不再是input,而是update:modelValue。使用方法如下

Vue2的v-model和Vue3的v-model区别_第7张图片

 Vue2的v-model和Vue3的v-model区别_第8张图片

参考文档   Vue3中v-model的使用 - 知乎

 vue 2 实现自定义组件一到多个v-model双向数据绑定的方法 - 码农教程

vue 2 实现自定义组件一到多个v-model双向数据绑定的方法_Dobility的博客-CSDN博客_v-model绑定多个值

 谈谈对.sync修饰符的理解 - 知乎

v-model基本用法及给组件绑定多个v-model - 吴小明- - 博客园
.sync 修饰符实现双向绑定_Be____nice的博客-CSDN博客

你可能感兴趣的:(vue,前端)