Vue2的.sync修饰符转Vue3中v-model

Posted 2021-09-28 Error

Vue2中的语法糖.sync：

在父组件中的
<div :title.sync="visible" ></div>
等同于: / .sync将针对于title的监听事件缩写 /
<div :title="visible" @update:title="visible = $event" ></div>
在子组件的methods中使用如下将新的value传给父级：

` handleClose() {
        this.$emit(\'update:title\', newValue)
    }`

Vue3中用v-model替代了.sync修饰符和组件的model选项 / 不兼容 /：

针对于有参数的：<div v-model:title="visible" ></div>
等同于：<div :title="visible" @update:title="visible = $event" ></div>

Vue3中还针对于没有参数的v-model：

<div v-model="visible" ></div>
没有参数但却实际上在父组件内传入modelValue，类似于：
v-model:modelValue="visible" @updata:modelValue="visible =$event"
在父组件里是运用visible,在子组件里传入的props里的是modelValue.
更改参数，传入父级也是用modelValue
this.$emit(\'update:modelValue\', newValue)

详情可以看Vue3的官方

.sync在Vue3的转变