Vue项目Unexpected mutation of “isVisible“ prop报错

问题背景：使用vue+element-ui，用到dialog组件时，需要父组件props传递值去控制dialog组件显隐。这个时候出现问题：Unexpected mutation of "isVisible" prop

 

问题解析：Unexpected mutation of "isVisible" prop 大致意思是说不允许在子级修改父级的数据

问题原因：这里涉及到vue的单向数据流的概念

什么是单向数据流？

父组件通过prop给子组件传递数据，子组件中所有的 props 都将会根据父组件的数据变化实时更新为最新值。但是如果反过来，子组件更新了props中的数据，这样会导致一个子组件的变化引发所有依赖于这个数据的子组件的变化。

解决方法：为了不违背vue的单向数据流，我们可以采用computed属性方法，具体方法如下：

①首先在父组件中将数据传递给子组件，并且自定义一个方法

<BorrowingApplicationDialog
      :visible="isVisible"
      @updateVisible="updateVisible"/>

updateVisible(){
  this.isVisible = !this.isVisible
}

 

②在子组件中

<el-dialog title="收货地址" :visible.sync="showDialog">

props:{
     visible:{
          type:Boolean,
     }
}

computed:{
        showDialog:{
            get(){
                return this.visible
            },
            set(val){
                this.$emit('updateVisible',val)
            }
        }
    }