子组件改变父组件属性报错,Avoid mutating a prop directly since the value will be overwritten whenever

image.png

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

  //错误信息

export default {
props: {
    exportErrorMessage: {
      type: Boolean,
      default: () => false
    },
    exportErrorMessageList: {
      type: Array,
      default: () => []
    }, // 导入错误信息列表
    loadingS: {
      type: Boolean,
      default: () => false
    }
  },
data () {},
}

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

image.png

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

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中的双向绑定.