vue3中自定义组件的双向绑定

vue2中有个.sync的语法糖可以使用

<child :visible.sync="imgVisible" />

子组件可以this.$emit(‘update:imgVisible’,false)

//子组件使用 
this.$emit('update:imgVisible',false)

vue3写法其实变化不大
其实也是语法糖

<div @click="imgVisible=true">打开子组件div>
<child v-model:visible="imgVisible" />

// 父 js
<script setup>
	import { ref } from "vue";
	let imgVisible = ref(false)
</script>

<div v-if="props.visible">
	
div>

//子组件  js
<script setup>
let props = defineProps({
  visible:false,
})
let emit = defineEmits(['update:visible',])
function close (){
  emit('update:visible',false)
}
</script>