Vue3 起手式(三)

16 min read

Vue2 v-model

vue2的v-model 本质是一组属性和方法的语法糖

image-20210621141355798

Vue2 自定义v-model组件

vue2通过$emit 触发父组件传递下来的 input方法,但容易和子组件的input产生混淆

image-20210621141934281

对父组件传非input事件需要通过定义组件的model属性来更改

image-20210621142444127

vue3 v-model

  • 重大变更：在自定义组件上使用 v-model 时，属性以及事件的默认名称变了：

    • 属性：value => modelValue

    • 事件：input => update:modelValue

  • 重大变更：v-bind 的 .sync 修饰符和组件的 model 选项被干掉了，取而代之的是 v-model 参数

  • 新特性： 支持同一组件同时设置多个 v-model

  • 新特性：支持开发者自定义 v-model 修饰符

在 3.x 版本中，在自定义组件上使用 v-model 相当于传递了一个 modelValue 属性以及触发一个 update:modelValue 事件：

<KyrieInput v-model="name" />
<！-- 这两行其实是一样的 -->
<KyrieInput :modelValue="name" @update:modelValue="name = $event" />

如果要改变绑定的属性名，只需要给 v-model 传递一个参数就好了：

<KyrieInput v-model:title="name" />
<!-- 等同于 -->
<KyrieInput :title="name" @update:title="name = $event" />

组件绑定多个 v-model

<KyrieInput v-model:title="name" v-model:content="info" />
<!-- 相当于 -->
<KyrieInput
    :title="name"
    @update:title="name = $event"
    :content="info"
    @update:content="info = $event"
/>