el-dialog作为子组件使用(关闭报错解决方法）

一、通过父子组件传值来实现关闭

el-dialog作为子组件使用时，关闭对话窗的时候会出现各种错误，因为弹窗显示状态值（:visible.sync）是从父组件传递的参数，如果使用自带的关闭按钮，会报出一个错误：

[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: "visible"

二、通过vueX来实现关闭

由于上面的方法出错，于是又想到了另一种解决办法，通过VueX全局变量来控制显示与否，但还是会报错，

Cannot read property ‘$store’ of null

总结

总结原因就是，子组件的关闭事件和父组件的关闭事件相冲突了，子组件的可见性要由父组件来控制，不能直接修改visible的值，

通过设置 :befor-close 来规避这一问题，从而解决问题

before-close为关闭弹窗前的回调函数，在操作改变子组件关闭事件之前先调用父组件的关闭事件，就不会再报错了

父组件

<template>
 <div class="app-container">
     <!--搜索-->
    <base-station-filter
      @openSetFrequency="handleOpenSetFrequency"
      @openBindWarnStandard="handleOpenBindWarnStandard"
    />
    <!--绑定气体标注-->
    <bind-warn-standard
      :bind-warn-standard-visible="bindWarnStandardVisible"
      @closeBindWarnStandard="handleCloseBindWarnStandard"
    />
  </div>
</template>
<script>
import BindWarnStandard from './BaseStationSetting/BindWarnStandard'
  export default {
    data(){
      return {
        bindWarnStandardVisible: false, // 绑定气体标准可见性
      }
    },
    methods: {
       // 打开绑定气体标准窗口
    handleOpenBindWarnStandard() {
      this.bindWarnStandardVisible = true
    },
    // 关闭绑定气体标准窗口
    handleCloseBindWarnStandard() {
      this.bindWarnStandardVisible = false
 	   }
	 }
  }
</script>

子组件

<template>
 <el-dialog
      :visible.sync="bindWarnStandardVisible"
      :before-close="handleCloseBindWarnStandard"
      title="气体警报标准绑定">
    </el-dialog>
</template>
<script>
  export default {
  name: 'BindWarnStandard',
  props: {
    bindWarnStandardVisible: {
      required: true,
      type: Boolean
    }
  },
    methods: {
     // 关闭绑定气体标准弹窗
    handleCloseBindWarnStandard() {
      this.$emit('closeBindWarnStandard')
    },
    }
  }
</script>

更多解决办法，参考 https://www.cnblogs.com/yeqrblog/p/9141701.html