vue2 dialog整体作为子组件时每次打开都重新执行生命周期

因为子组件 @closeDialog 事件手动修改了 isDialogVisible 状态，而右上角的×按钮并未触发此事件。这种把dialog作为一个整体写成子组件时需要关闭 dialog的右上角×关闭按钮 :show-close=“false”解决办法是利用 dialog的属性 before-close 关闭前回调修改状态（业务不需要所以未尝试，理论上可行）前言：将dialog整体作为

Yoga99

2256人浏览 · 2022-11-18 16:57:05

Yoga99 · 2022-11-18 16:57:05 发布

前言：将dialog整体作为子组件时，每次打开都重新执行created、methods生命周期

子组件代码：

template>
  <el-dialog :title="title" width="1180px" :visible.sync="isDialogVisible" :close-on-click-modal="false" :show-close="false" top="4vh" append-to-body>
		<div>内容</div>
	    <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog" :size="size">取 消</el-button>
        <el-button type="primary" @click="handleSubmitPersonnel">确 定</el-button>
    </div>
    </el-dialog>
</template>

//js
 props: {
   isDialogVisible: {
      type: Boolean
    },
 },
 methods: {
	 closeDialog () {
     	 this.$emit('handleVisibleDialog', false)
   	 },
   	   // 获取提交   业务相关 可无视
    handleSubmitPersonnel: function () {
      this.$emit('handleSubmitPersonnel', { ...this.checkUserInfo })
    },
 }

父组件代码：


<template> 
<div>
 <Select-Personnel-Config-Dialog v-if="isDialogVisible" :isDialogVisible="isDialogVisible" @handleVisibleDialog="handleVisibleDialog" :dialogConfig="dialogConfig"></Select-Personnel-Config-Dialog>
</div>
</template> 
<script>
import SelectPersonnelConfigDialog from '../components/SelectPersonnelConfigDialog.vue'
export default {
  components: {
    SelectPersonnelConfigDialog
  },
  data () {
    return {
      input: '',
      size: 'small',
      dialogConfig: {
        deptCode: '00074201101'
      },
      isDialogVisible: false
    }
  },
  created () {},
  methods: {
  //触发事件
    inputClick () {
      this.handleVisibleDialog(true)
    },
    //控制显隐
    handleVisibleDialog (v) {
      this.isDialogVisible = v
    },
      // 获取子组件的提交内容
    handleSubmitPersonnel: function (data) {
      console.log(data)
	}
  }
}
</script>

关键点通过isDialogVisible参数与父子组件通讯显隐，再利用 v-if 控制元素销毁
这种把dialog作为一个整体写成子组件时需要关闭 dialog的右上角×关闭按钮 :show-close=“false”
因为子组件 @closeDialog 事件手动修改了 isDialogVisible 状态，而右上角的×按钮并未触发此事件
所以下次打开时 isDialogVisible 未修改导致dialog未显示

解决办法是利用 dialog的属性 before-close 关闭前回调修改状态（业务不需要所以未尝试，理论上可行）