報錯：[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the paren

今天在做Vue的時候，子組件關閉的時候，報如下錯誤

報錯：vue.esm.js?65d7:610 [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: "isVisible"

 

問題解決：

父組件里面調用子組件的代碼 

<NoteBookLimitFlow :isVisible="isShowFlowSearch"></NoteBookLimitFlow>

　　

isVisible用來判斷是否顯示子組件

 

子組件里面的代碼

<el-dialog title="XXXX"              
               :visible.sync="IsShowPage"
               @close="closeForm()">
</el-dialog>

watch: {
            isVisible(val) {
                this.IsShowPage = val;//新增isVisible的watch，監聽變更並同步到IsShowPage上
            }
        },


data() {
        return {
            //定義一個IsShowPage來接收傳遞過來的值 
            IsShowPage: this.isVisible,                          
        }
    }