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.或是其他原因

这个问题在度娘没找到具体的解决方案,也没有发布这个问题的
希望这篇文章能帮助到有需要的朋友。
希望能有大神解惑!
多谢!

  • 12
    点赞
  • 25
    收藏
    觉得还不错? 一键收藏
  • 15
    评论
评论 15
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值