Vue3:v-model、自定义修饰符

一、单向数据流

vue是单向数据流的,所以v-model其实是破坏性的

v-model是一个语法糖:

  • 在vue2中v-model是input(根据表单类型决定)事件和value的结合;
  • 在vue3中v-model是props和emit的结合

二、使用案例

v-model默认绑定的事件是'update:modelValue',默认绑定的数据是modelValue

效果:

Vue3:v-model、自定义修饰符_第1张图片 

父组件:



子组件:



三、自定义修饰符

添加到组件 v-model 的修饰符将通过 modelModifiers prop 提供给组件。

改造父组件:

改造子组件

你可能感兴趣的