建企业网站建设注意问题网站统计平台

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中子组件，关键代码

// 接受的属性值
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这个属性，除了这个属性外其余的都要加参数。

vue3中子组件，关键代码

// 接受的属性值
let props = defineProps({title:{type:String,default:'',}
});
// 触发方法使用'update:参数'emits('update:title','newValue')