vue3 update:modelValue 线上环境报错modelValue is not defined

在使用vue3进行开发子组件显示隐藏时，我们在父组件中给子组件传递v-model:visible来标识子组件的显隐。

一般情况，父组件中代码为如下：

<Child v-model="drawerVisible" ... />

子组件，一般使用el-plus中的drawer或modal等弹出框，以下以el-drawer为例

<template>
	<el-drawer
		v-model="visible"
        title="..."
        direction="rtl"
        modal-class="drawer-trigger"
        :before-close="handleCancel"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        destroy-on-close
    >
    ...
    </el-drawer>
 </template>
 <script setup>
 	import ....
 	const props = defineProps({
		visible: Boolean
	})
	const emit = defineEmits(["update:modelValue"])
	const handleCancel = () => {
		emit('update:modelValue', false)
	}
 </script>

通过handleCancel方法来改变modelValue的状态，达到关闭drawer的目的。


这种写法在开发过程中，没有任何问题。

但在部署到线上后，会出现error：visible is not defined


备注：“visible”对应子组件v-model的值

完美解决方法：


在子组件中，重新定义子组件v-model的值，将emit(‘update:modelValue’, false)替换。代码如下:

 <script setup>
 	import ....
 	const props = defineProps({
		visible: Boolean
	})
	const emit = defineEmits(["update:modelValue"])
	// 子组件定义自己的visible
	const visible = computed({
    	get: () => props.visible,
    	set: (value) => emit("update:modelValue", value),
	})
	// handleCancel中修改子组件自己的visible触发emit
	const handleCancel = () => {
		visible.value = false
	}
 </script>

不完美解决方法：


曾尝试将template中v-model=”visible”改为v-model=“props.visible”。实现了显隐功能，但是会报warning：props的值不可更改。

未解之谜：


1.为什么在开发过程中没有错误，而在线上环境会报错。

2.子组件的visible是如何对应到父组件的v-model。为什么即使子组件使用modelValue代替visible依然不行。

2.是否vite（我使用的vite + vue3）在本地和线上的编译有区别，导致template对props中值的引用有区别。

3.或是其他原因

这个问题在度娘没找到具体的解决方案，也没有发布这个问题的

希望这篇文章能帮助到有需要的朋友。

希望能有大神解惑！

多谢！