el-dialog 使用v-if，open事件不生效的解决方案

el-dialog 使用v-if，open事件不生效的解决方案

引用

CSDN

1.

https://m.blog.csdn.net/qq_39918500/article/details/142638405

在使用Element UI的el-dialog组件时，如果使用v-if指令来控制弹框的显示和隐藏，可能会遇到dialog的open事件不生效的问题。本文将详细分析这一现象的原因，并提供相应的解决方案。

问题现象

当在el-dialog上使用v-if指令时，即使将dialogVisible设置为true，组件的open事件也不会触发。具体代码示例如下：

父组件

<template>
  <div>
    <el-button @click="dialogVisible = true">打开弹框</el-button>
    <el-dialog :visible.sync="dialogVisible" @open="handleOpen">
      <!-- 弹框内容 -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    handleOpen() {
      console.log('弹框打开');
    },
  },
};
</script>

原因分析

在Vue中，v-if指令的工作机制是：当条件满足时，会创建一个新的组件实例；当条件不满足时，会销毁当前组件实例。这意味着：

1. 重新创建实例：每次dialogVisible变为true时，el-dialog组件会被销毁并重新创建。这会导致组件的所有状态、属性（如visible）和生命周期都被重置。
2. prop初始化：在新实例创建时，visible属性会根据初始值进行设置。由于使用v-if控制组件的渲染，组件的状态（包括prop）不会在之前的实例中保留，因此之前的visible状态不再有效。

相比之下，使用v-show时，组件始终存在于DOM中，只是通过CSS控制其显示和隐藏，因此能够保持其状态和属性。

解决方法

要解决这个问题，可以采用以下两种方案：

1. 使用v-show代替v-if。这样组件始终存在于DOM中，只是通过CSS控制其显示和隐藏，从而保持组件的状态和属性。

2. 在父组件中处理dialogVisible的变化，并确保在新组件实例中进行适当的初始化。例如，可以在dialogVisible变化时，手动触发一些初始化操作。