vue2比较让人诟病的一点就是提供了两种双向绑定：v-model和.sync，
在vue3中，去掉了.sync修饰符，只需要使用v-model进行双向绑定即可。
为了让v-model更好的针对多个属性进行双向绑定（vue2中自定义组件中v-model只能使用一次），vue3做出了以下修改：
1、当对自定义组件使用v-model指令时，绑定的属性名由原来的value变为modelValue，事件名由原来的input变为update:modelValue：
<!-- vue2 -->
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />
<!-- 简写为 -->
<ChildComponent v-model="pageTitle" />
<!-- vue3 -->
<ChildComponent
:modelValue="pageTitle"
@update:modelValue="pageTitle = $event"
/>
<!-- 简写为 -->
<ChildComponent v-model="pageTitle" />
vue3中子组件，关键代码文章来源地址https://www.toymoban.com/news/detail-812978.html
// 接受的属性值
let props = defineProps({
modelValue:{
type:String,
default:'',
}
});
// 触发方法
emits('update:modelValue','newValue')
去掉了.sync修饰符，它原本的功能由v-model的参数替代:
<!-- vue2 -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
<!-- 简写为 -->
<ChildComponent :title.sync="pageTitle" />
<!-- vue3 -->
<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
<!-- 简写为 -->
<ChildComponent v-model:title="pageTitle" />
不要蒙圈，相当于在vue3中，v-model不加参数的情况就相当于给子组件传递了modelValue这个属性，除了这个属性外其余的都要加参数。文章来源：https://www.toymoban.com/news/detail-812978.html
vue3中子组件，关键代码
// 接受的属性值
let props = defineProps({
title:{
type:String,
default:'',
}
});
// 触发方法使用'update:参数'
emits('update:title','newValue')
到了这里，关于vue3中l和vue2中v-model不同点的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
