子组件改变父组件属性报错,Avoid mutating a pr

导入文件信息，如果模板错误会给出错误信息提示，所以把错误信息提示框，抽取出来当做一个单独的组件加入页面。

 <import-error-dialog :loadingS='loadingS'
                         :exportErrorMessage="exportErrorMessage" //是否显示错误提示弹框
                         :exportErrorMessageList='exportErrorMessageList' /> //错误信息

<el-dialog title="导入模板错误信息"
             :visible.sync="exportErrorMessage"
             width="50%">
</el-dialog>
export default {
props: {
    exportErrorMessage: {
      type: Boolean,
      default: () => false
    },
    exportErrorMessageList: {
      type: Array,
      default: () => []
    }, // 导入错误信息列表
    loadingS: {
      type: Boolean,
      default: () => false
    }
  },
data () {},
}

错误信息正常显示，但是当点击错误弹框的关闭按钮时报错

image.png

大致意思是子组件改变了父组件的属性，因为在组件中数据的传递是单项绑定，并不是双向，所以允许，父级传递给子级，但是不允许子级修改父级的属性值。
因为点击dialog的关闭框是相当于改变了exportErrorMessage的值，所以报错
所以它想要什么我们就给他什么，我们可以把数据改成双向绑定的形式

<import-error-dialog :loadingS='loadingS'
                         :exportErrorMessage.sync="exportErrorMessage" //改成双向绑定
                         :exportErrorMessageList='exportErrorMessageList' />

<el-dialog title="导入模板错误信息"
             :visible.sync="visible"
             width="50%">
</el-dialog>
export default {
props: {
    exportErrorMessage: {
      type: Boolean,
      default: () => false
    },
    exportErrorMessageList: {
      type: Array,
      default: () => []
    }, // 导入错误信息列表
    loadingS: {
      type: Boolean,
      default: () => false
    }
  },
data () {
    return {
      visible: this.exportErrorMessage
    }
  },
  watch: {
    exportErrorMessage (val) {
      this.visible = val
    }
  },
}

另取一个变量监测exportErrorMessage来控制dialog的显示与关闭。

采用另一种方式

image.png
image.png
image.png

此处采用update关键字进行dialog中的双向绑定.