Chaoszhu'Blog

Appearance

v-model变更 ​

vue2中v-model原理 ​

(参考这里)[https://chaoszhu.com/front-end/vue2/v-model的实现与组件上使用.html]

vue3 v-model变更 ​

sync修饰符弃用

同一组件可以同时设置多个 v-model

默认属性及名称更改

单个v-model ​

子组件接收到的props不在是默认value，而是modelValue

html
<modal v-model="isVisible"></modal>
<!-- 相当于 -->
<modal :modelValue="isVisible" @update:modelValue="isVisible = $event"></modal>

多个v-model ​

v-model:xxx xxx为自定义的props名称

html
<!-- =================== -->
<modal v-model:visible="isVisible" v-model:content="content"></modal>
<!-- 相当于 -->
<modal
    :visible="isVisible"
    :content="content"
    @update:visible="isVisible"
    @update:content="content"
/>