关于element-plus中el-darwer组件线上报错x.onUpdate:modelValue.n.＜computed＞.n.＜computed＞

visibleModal为我在抽屉组件中使用v-model绑定的数据

原始写法：pater.vue

<template>

    <el-button @click="handleShowDrawer"> showDrawer </el-button>

    	<BaseModalDrawer
			:visibleModal="data.visibleModal">
        </BaseModalDrawer>

</template>

<script setup>

import {reactive} from 'vue'
const data = reactive({
    visibleModal=false
})

const handleShowDrawer = ()=>{
    
    data.visibleModal = true

}

</script>

原始写法：child.vue 

<template>
    		<el-drawer
			v-model="visibleModal"
			size="60%"
			:with-header="false"
			
		></el-drawer>
<template>

<script setup>

const props = defineProps({
	visibleModal: {
		type: Boolean,
		default: false,
	},
})

<script>

在csdn搜索到同样的报错，别人的解决方案，试过了但是没法实现，还是存在问题：原文地址如下vue3 update:modelValue 线上环境报错modelValue is not defined-CSDN博客

 最后我的解决办法：

child.vue

<template>
    		<el-drawer
			v-model="visibleModal"
			size="60%"
			:with-header="false"
	        :before-close="handleClose"
			
		></el-drawer>
<template>

<script setup>
const visibleModal = ref(false)

const props = defineProps({
	visibleModal: {
		type: Boolean,
		default: false,
	},
})

const emits = defineEmits([
	'handleCloseDialog',
])

//使用darwer的关闭方法手动修改一下visiblemodal值
const handleClose = (done)=>{
        done()

        emits('handleCloseDialog', false)

}

<script>

pater.vue

<template>

    <el-button @click="handleShowDrawer"> showDrawer </el-button>

    	<BaseModalDrawer
			:visibleModal="data.visibleModal"
            :handleCloseDialog="handleClose"
    >
        </BaseModalDrawer>

</template>

<script setup>

import {reactive} from 'vue'
const data = reactive({
    visibleModal=false
})

const handleShowDrawer = ()=>{
    
    data.visibleModal = true

}
const handleClose=()=>{
    data.visibleModal = false
}

</script>