v-model和.sync的区别

芒果味8222025-08-31 18:18

v-model(vue2)

1.弹窗（直接v-model绑定父组件的值，这样一个v-model就能很轻松地控制弹窗显影

父组件

xml 复制代码

<button @click="() => (popShow = true)">显示弹窗<button>
<pop v-model:popControll="popShow">
<div>我是一个弹窗</div>
</pop>

子组件

javascript 复制代码

<div class="cover" :style="{display: value ? 'block' : 'none'}">
    <div> 
    <button>确定</button>
    <button> @click="hiddenPop">取消</button>
    </div>
</div>

    Props:{
        type:Booolea,
        default:false
    }
function hiddenPop() {
    emit("date:value",false)//注意：这里只能用value,可是在项目中，我们有时不一定定义为value
}

v-model(vue3)

父组件

xml 复制代码

<button @click="() => (popShow = true)">显示弹窗<button>
<pop v-model:popControll="popShow">
<div>我是一个弹窗</div>
</pop>

子组件

less 复制代码

<div class="cover" :style="{display: modelValue ? 'block' : 'none'}">
    <div> 
    <button>确定</button>
    <button> @click="hiddenPop">取消</button>
    </div>
</div>

let emit = defineEmits(["update:popConttroll"])
let { popControll } = defineProps({
    popControll:{
        type:Booolea,
        default:false
    }
})
function hiddenPop() {
    emit("update:modelValue",false)
}

.sync(只能在vue2用，vue3已废弃)

父组件

xml 复制代码

<buss :details.sync=list></buss>

这种写法等同于
<buss :details="list" @update:details="list=$event"></buss>

子组件

csharp 复制代码

    Props:{
        type:Booolea,
        default:false
    }
function hiddenPop() {
    emit("update:details",false)//注意update:是固定的，不强制要求value，这里是details
}