网站建设网站多少钱,公司名字大全列表,怎么制作微信表情包,如何做一个网站平台vue2比较让人诟病的一点就是提供了两种双向绑定#xff1a;v-model和.sync#xff0c; 在vue3中#xff0c;去掉了.sync修饰符#xff0c;只需要使用v-model进行双向绑定即可。
为了让v-model更好的针对多个属性进行双向绑定#xff08;vue2中自定义组件中v-model只能使用…vue2比较让人诟病的一点就是提供了两种双向绑定v-model和.sync 在vue3中去掉了.sync修饰符只需要使用v-model进行双向绑定即可。
为了让v-model更好的针对多个属性进行双向绑定vue2中自定义组件中v-model只能使用一次vue3做出了以下修改
1、当对自定义组件使用v-model指令时绑定的属性名由原来的value变为modelValue事件名由原来的input变为update:modelValue
!-- vue2 --
ChildComponent :valuepageTitle inputpageTitle $event /
!-- 简写为 --
ChildComponent v-modelpageTitle /!-- vue3 --
ChildComponent:modelValuepageTitleupdate:modelValuepageTitle $event
/
!-- 简写为 --
ChildComponent v-modelpageTitle /
vue3中子组件关键代码
// 接受的属性值
let props defineProps({modelValue:{type:String,default:,}
});// 触发方法emits(update:modelValue,newValue)去掉了.sync修饰符它原本的功能由v-model的参数替代:
!-- vue2 --
ChildComponent :titlepageTitle update:titlepageTitle $event /
!-- 简写为 --
ChildComponent :title.syncpageTitle /!-- vue3 --
ChildComponent :titlepageTitle update:titlepageTitle $event /
!-- 简写为 --ChildComponent v-model:titlepageTitle /
不要蒙圈相当于在vue3中v-model不加参数的情况就相当于给子组件传递了modelValue这个属性除了这个属性外其余的都要加参数。
vue3中子组件关键代码
// 接受的属性值
let props defineProps({title:{type:String,default:,}
});
// 触发方法使用update:参数emits(update:title,newValue)
