vue3中l和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 :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')