vue3.4前版本的组件间双向绑定

以前v-model:xxx="xxx"。父组件:

    <my-comp v-model:xxx="xxx" />

在子组件中更新需要使用

defineProps({
    xxx:{
        type:String
    }
})
emit('update:xxx',newValue)

可以更新成功

vue3.4引入的新功能defineModel

    3.4版本中引入了defineModel的方法使双向绑定更加简单
父组件依旧是:

    <my-comp v-model:xxx="xxx" />

子组件：

const xxx = defineModel('xxx',{
    type:String
})
xxx.value = '222'   //父组件同步更新

踩坑点

父组件:

<test v-model:id="id" />

<script setup lang="ts">
    const id = ref('')
</script>

子组件：

const id = defineModel('id',{
    type:String
})
const clickHanlder = ()=>{
    id.value = '222'
    console.log(id.value)   //打印的是''
}

    双向绑定了一个id，点击button的时候更新了父子组件的id值，页面显示正确，但是在子组件中修改后打印为修改前的值。这和我们期待的结果不一样啊！！

解决方法

子组件：

const id = defineModel('id',{
    type:String
})
const clickHanlder = ()=>{
    id.value = '222'
    console.log(id.value)   //打印的是''
    nextTick(()=>{
        console.log(id.value)  //打印的是'222'
    })
}

    一般遇到这种情况无非就是组件生命周期的问题，加上nextTick后正常打印，所以大概可以判断出，defineModel的执行时机是下一个update周期。问题解决。

思考

    是否有其他的解决方法，毕竟使用nextTick和原本的想法不一样，且不太美观。如果大家有更好的方法欢迎在评论区留言。有问题的地方也欢迎在评论区指出。