Vue3 - 组件的v-model

组件v-model

基本用法

  • 数据双向绑定

  • 他的原理在于传递了一个名为modelValue的属性以及注册了一个名为@update:modelValue自定义事件,在子组件中需要在defineProps接收modelValue属性以及声明defineEmits。

  • 如果不做任何操作则默认绑定的就是modelValue属性和注册@update:modelValue事件,但也可以进行修改,可以通过v-model:title去更改名字

  • 在代码中的体现

  • // 父组件
    
     
    
    
    
    
    // 子组件
    
     
    
    

与vue2中v-model的区别

  • vue2中的v-moel在组件上只能绑定一次,绑定多个需要使用.sync语法糖
  • 而vue3中的v-model更加类似于.sync,并且可以修改名字,因此它可以在一个组件标签上绑定多个,多个绑定的v-model通过修改名字加以区分

自定义v-model的修饰符

  • v-model有一些自定义事件,但某些场景下需要自定义一些修饰符

  • 例如首字母大写

  • // 子组件
    
    
    
    
    
    // 父组件
    
     
    
    

你可能感兴趣的:(Vue3,vue.js,javascript,前端,前端框架)