el-dialog作为子组件使用，点击自带关闭按钮报错

el-dialog作为子组件使用时，点击dialog自带关闭按钮会报错：

[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: “dialogVisible”

• 原因：

vue的单向数据流原理，不能在子组件中直接修改父组件传过来的值，子组件和父组件的关闭事件产生冲突

• 解决方案：

设置:before-close

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

子组件：

<template>	
	<el-dialog
	    title="请选择要新建的商机类型"
	    :visible.sync="dialogVisible"
	    :before-close="toggleDialog"
	    :close-on-click-modal="false" />
</template>

<script type="text/javascript">
export default {
  name: 'createBusiness',
  props: {
    dialogVisible: Boolean
  },
  data() {
    return {}
  },
  methods: {
    toggleDialog() {
      this.$emit('toggleDialog')
    }
  }
}
</script>

父组件：

<template>
	<create-business
	    :dialog-visible="dialogVisible"
	    @createClick="createHandle"
	    @toggleDialog="closeDialog" />
</template>

<script type="text/javascript">
import CreateBusiness from '@/components/CreateBusiness'
export default {
  name: 'CRMListHead',
  components: {
    CreateBusiness
  },
  data() {
    return {
    	dialogVisible: false
    }
  },
  methods: {
    // dialog弹窗关闭调用，防止报错
	closeDialog() {
	  this.dialogVisible = false
	}
  }
}
</script>