美文网首页
Vue3 v-model 语法糖

Vue3 v-model 语法糖

作者: 沃德麻鸭 | 来源:发表于2021-10-30 23:06 被阅读0次

    v-model的本质是属性绑定和事件绑定的结合,可以在标签上使用也可以在组件上使用

    Vue2中v-model

    vue2标签使用 vue2组件使用

    vue2 中  v-model实质是自定义属性:value和@input自定义事件

    $event有两层含义:

    1. 如果是原始DOM的事件,那么$event表示js的原生事件对象

    2.如果是组件的自定义事件,那么$event是$emit传递的数据


    Vue3中v-model

    vue3 中 v-model的本质是 :modelValue 和 @update:modelValue 两者的绑定

    vue3 组件使用(父组件)

    所以在子组件中响应定义modelValue属性

    自定义属性的定义(子组件) 原生自定义事件

    可以绑定多个v-model:

    v-model:xxx='xxx'

    总结:

    1.v-model可以通过绑定多个属性的方式,向子组件传递多个值并且保证双向绑定

    2.可以替代Vue2中sync修饰符(sync修饰符在Vue3中已经被废弃)

    3.操作DOM  vue2和vue3用法是一样的,操作组件时不一样

    相关文章

      网友评论

          本文标题:Vue3 v-model 语法糖

          本文链接:https://www.haomeiwen.com/subject/mnyawltx.html