在vue3中 v-model绑定的默认值从value
变为了modelValue
但是emits定义modelValue是不能自动响应的,需要添加 "update:"
所以在setup里面的实现方式如下
父组件
<template>
<section>
<childVue v-model="visible"></childVue>
</section>
</template>
<script setup lang='ts'>
import { ref } from 'vue';
const visible= ref(false)
</script>
子组件
<template>
<div v-if="modelValue" @click="closeModal">close</div>
</template>
<script setup lang="ts">
import { defineEmits } from 'vue'
const props = defineProps({
modelValue: {
type: Boolean,
required: true
}
})
const emit = defineEmits(['update:modelValue'])
function closeModal() {
emit('update:modelValue', false)
}
</script>
这样就实现了父子组件双向绑定