问题描述:
项目中手动封装一个dialog组件,父组件中控制dialog的显示与否,通过父组件直接传值到子组件,子组件用props接收,但是回传的时候出现了问题,子组件中不能修改父组件传过来的值。控制台一致报错:Uncaught TypeError: 'set' on proxy: trap returned falsish for prop
问题原因:父组件给子组件传值,子组件不能改变父组件传过来的变量,而elementUI中Dialog的又恰巧在点击关闭按钮式会自动visible(element-plus el-dialog使用v-model来决定是否显示)赋值false,所以控制台一直报错,在子组件中修改了父组件的值。
网上搜寻各种资料都是在before-close中做一些处理,尝试过一遍,仍未能解决问题。
解决方案:不传true和false,传数值,通过watch监听
<MdmBusinessPartnerDialog :dialogVisibleTrigger="dialogVisibleTrigger" :businessPartner="businessPartner"></MdmBusinessPartnerDialog>
const viewBusinessPartner = (partner: BusinessPartner) => {
dialogVisibleTrigger.value = dialogVisibleTrigger.value + 1;
businessPartner.value = partner;
}
<template>
<el-dialog v-model="dialogVisible" width="35%" close-on-click-modal="true">
<MdmBusinessPartner :businessPartner="businessPartner"></MdmBusinessPartner>
</el-dialog>
</template>
props: {
dialogVisibleTrigger: {
type: Number
},
businessPartner: {
type: Object as PropType<BusinessPartner>
}
},
watch:{
dialogVisibleTrigger(){
this.dialogVisible = true;
}
},
data(){
return {
dialogVisible : false
}
},