vue3中封装el-dialog为公共组件踩坑

问题描述：

项目中手动封装一个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
        }
  },