vue 3.x 组件实现双向绑定

1.子组件获取props和抛出update:text事件

<template>
    <div>
        <van-cell-group>
            <van-field v-model="text" label="文本" />
        </van-cell-group>
    </div>
</template>
<script>
import { ref, watch } from 'vue'
export default {
    name:"zzjInput",
    props:{
        text:{
            type:String,
            default:""
        }
    },
    setup(props,context){
        let text=ref('')
        watch(()=>props.text,(val)=>{
            text.value=val
        })
        watch(()=>text.value,(val)=>{
            context.emit('update:text',val)
        })
        return {
            text
        }
    }
}
</script>

2.父组件双向绑定，其实是单向绑定text和监听update:text事件

<template>
    <div>
        <zzjInput v-model:text="val"></zzjInput>
    </div>
</template>
<script>
import zzjInput from '@/components/zzjInput'
import { ref, watch } from 'vue'
export default {
    components:{
        zzjInput
    },
    setup(){
        let val=ref('')
        watch(()=>val.value,(val)=>{//监听val,输入框变化，val变化则是实现了双向绑定
            console.log(val)
        })
        return{
            val
        }
    }
}
</script>

注意：在vue3中，v-modal不一定通过value值传递，可任意自定义的props来传递,抛出事件则是update:xxx固定为形式