vue项目中封装弹框为子组件 涉及的相关父子组件传参的问题

【VUE报错】vue.runtime.esm.js?2b0e:619 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “dialogVisible”

vue项目中封装弹框为子组件 涉及的相关父子组件传参的问题

报错原因：父组件传给子组件的数据被重新赋值修改了

问题描述：当一个页面数据比较庞大，代码写的较多时，通常我们会把能用到的组件抽取成公共组件，一方面实现项目的模块化，另一方面代码看着简单明了。

抽取弹框会遇到的问题：
1. 打开弹框时父传子，修改弹框显示属性为true（没问题）
2. 关闭弹框时子传父，子组件需要去修改父组件的弹框显示属性，涉及到单向数据流（子组件无法修改父组件的属性）
下面给出解决方案：

父组件：

//导入
import uploading from "../../components/uploading";
//声明组件
 components: {
    uploading,
  },
//html中使用
 <!-- 上传列表的弹框 -->
 <uploading :dialogVisible="isShow" @close="closeDialog" />
   <el-button
        class="uploading"
        @click="showDia()"
        >上传</el-button
      >
//data中都定义
   data() {
    return {
      isShow: false,//定义属性
      }
    }  
//methods中上传弹框的操作方法
    showDia() {
      this.isShow = true;
    },
    closeDialog() {
      this.isShow = false;
    },

子组件：

//html中写自己需要的html样式
  <el-dialog
      title="正在上传1/4"
      :visible.sync="IsShowDialog"
      :modal="false"
      :show-close="false"
      @close='closeDialog()'
       width="38%"
    >
//接收父组件传过来的值
export default {
  props: ["dialogVisible"],
  data() {
    return {
      IsShowDialog: this.dialogVisible,
      }
 }
 //methods中将关闭事件传给父组件
 methods: {
    closeDialog() {
      this.$emit("close");
    },
  }
//！！！这一步的监听必须有，必须将父组件传来的数据重新赋值变量，不然子组件修改不了父组件的值
//新增dialogVisible的watch，监听变更并同步到
   watch: {
    dialogVisible(val) {
      this.IsShowDialog = val;
    },
  },
  //上面也必须要使用赋值后的变量