1.子コンポーネントは小道具を取得し、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.親コンポーネントの双方向バインディングは、実際には一方向バインディングテキストであり、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は必ずしも値で渡される必要はありませんが、任意のカスタム小道具で渡すことができ、スローされたイベントはupdate:xxxがフォームとして修正されます。