element的Dialog組件踩坑

在一個組件頁面中需要有一個彈窗，為了代碼簡潔我把彈窗封裝成一個組件方便重復調用

描述大致是一個父組件，里面有一個按鈕還有一個子組件（彈窗），點擊按鈕讓彈窗出來，彈窗自帶的有關閉功能，點擊關閉以后再點擊父組件的按鈕需要可以繼續彈出來

本來我是初始化給子組件彈窗綁定一個false，點擊按鈕改變這個綁定的值為true，然后傳值給子組件，然后子組件綁定這個值來控制展示與否，同時子組件有一個關閉回調函數，函數里面吧這個值再改為false發現實現不了

然后想着直接控制v-show來控制展示與否，但是考慮到后期使用放棄了這個想法，

后來使用了dialog組件自帶的closed方法和before-close的屬性都有問題，咨詢了大佬以后他告訴了我原因所在：

父組件給子組件傳值，子組件不能改變父組件傳過來的變量，而elementUI中Dialog的叉叉會自動賦值false，所以報錯

后來給出了我解決方案，

　　不傳true和false，傳數值，既然他是死循環我們就換個思路不讓他重復

放上部分代碼供參考：

<!--父組件-->
<el-button type="primary" style="width:220px;margin-top:40px;margin-left:380px;" @click="chuan">提交</el-button>
<dia-log :dialogVisiblea='a'></dia-log>

 data() {
    return{
      checkedread:true,
      a : 1,
    }
  },

 chuan(){
      //不斷改變a的值配合子組件watch函數
      this.a = this.a+1;
    }

 

<!--子組件-->
<template>
  <div>
    <el-dialog :visible.sync="childrenSay" class="opusuploadDialog">
      <div class="opusuploadDialogImg">
        <img src="@/assets/img/upload/uploadwaiting.png" style="width:150px;height:120px;" />
      </div>

      <div class="opusuploadDialogSpan">
        <span>正在上傳登記中，請耐心等待</span>
      </div>

      <el-button type="primary" class="opusuploadDialogBtn">確定</el-button>
    </el-dialog>
  </div>
</template>

<script>
export default {
    props:["dialogVisiblea"],
    data(){
        return{
             childrenSay: false,
            // dialogVisible:false,
        }
    },
    watch: {
      dialogVisiblea(){
          //dialogVisiblea改變賦值
          this.childrenSay = true;       
      }
    },

};
</script>