中国建设教育协会网站培训中心,吉林响应式网站建设,南昌seo推广外包,新手做网站盈利在vue2中提供了.sync修饰符#xff0c;但是在vue3中不再支持.sync#xff0c;取而代之的是v-model。
1.在vue2中v-model和.sync区别#xff1a;
1.相同点#xff1a;都是语法糖#xff0c;都可以实现父子组件中的数据的双向通信。 区别在于往回传值的时候. sync 的 $…在vue2中提供了.sync修饰符但是在vue3中不再支持.sync取而代之的是v-model。
1.在vue2中v-model和.sync区别
1.相同点都是语法糖都可以实现父子组件中的数据的双向通信。 区别在于往回传值的时候. sync 的 $emit 所调用的事件名必须是update:属性名。 2.格式不同v-model“num”, :num.sync“num” v-model input value :num.sync: update:num 3.v-model只能用一次.sync可以有多个
2. .sync修饰符的作用
.sync能够实现属性间的一个双向绑定。比如说现在我们有一个这个组件然后上面有一个v-bindtitle这样的一个属性。 如果说写成v-bind:title.synctitle那么它可以看做是一个语法糖它会隐式的向子组件里面传递一个v-on:updatetitle这样的一个事件也就是说
my-dialog :title.synctitle/my-dialog
等价于
my-dialog :titletitle updatetitle title newTitle/my-dialog
然后在子组件里面传过去调用$emit(update:title)冒号title来去修改父组件里面所绑定的值。它是能够实现属性间的一个双向绑定。
//my-dialog.vue
templateinput :valuetitle update$emit(update:title, $event.target.value)/
/template 官方文档关于这部分的参考https://v2.cn.vuejs.org/v2/guide/components-custom-events.html#sync-%E4%BF%AE%E9%A5%B0%E7%AC%A6
3 问题v-model只能用于表单组件是吗即使用在自定义组件中子组件里面也必须是表单组件
v-model在页面中不只是能用于表单控件input, textarea and select中。除此之前还可以使用到自定义组件中。
父组件使用了v-model以后自定义组件里面也不止限于表单组件。v-model其实只是一个语法糖和子组件是不是表单组件没有关系。v-modelname 其实是其实是v-bind:namename和v-on:updatenamenewNamename的语法缩写。 比如说就算是在子组件中input控件可以实现双绑也是因为使用了:valuename和input$emit(update:name, $event.target.value)其实是内部对这个v-model进行了再次处理。 而对于div等这种也可以通过$emit()的形式通知父组件然后由父组件对值进行修改。 总得来说就是v-model可以使用在表单或者自定义组件上。但是自定义组件里面的内容针对表单和非表单控件要做不同的处理才能实现数据双绑。
//父组件my-dialog v-model:namename/my-dialog//子组件inputtypetext:valuenameinput$emit(update:name, $event.target.value)/
defineProps([name])
defineEmits([update:name])
4.vue3在自定义组件中的v-model写法
CustomInput v-modelsearchText/CustomInput 等价于
CustomInput:model-valuesearchTextupdate:model-valuenewValue searchText newValue
/
子组件中
!-- CustomInput.vue --
script setup
defineProps([modelValue])
defineEmits([update:modelValue])
/scripttemplateinput:valuemodelValueinput$emit(update:modelValue, $event.target.value)/
/template 4.题vue2中的v-bind:name.sync的用法是不是和vue3中v-model在自定义组件中的用法一样的
vue2和vue3中v-model最大的区别就是对.sync修饰符进行了改写v-model中整合了.sync修饰符的功能
text-document v-bind:title.synctitle/text-document
就相当于
text-documentv-bind:titletitlev-on:update:titletitle $event
/text-document
