el-dialog 弹框调用组件，只有第一次弹出调用组件接口，后面弹出不在调用组件里的接口问题修复

最新推荐文章于 2026-08-15 13:32:33 发布

原创最新推荐文章于 2026-08-15 13:32:33 发布 · 2.1k 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

在使用Element UI的Dialog组件时，遇到一个子组件mounted钩子只触发一次的问题。原因是Dialog在多次打开时不会重新渲染子组件。解决方法是在Dialog外层添加一个带v-if的div，使每次显示Dialog时该div被重新创建，从而确保子组件每次都执行mounted生命周期钩子。此方法有效解决了子组件不重新渲染的问题。

问题：最近在项目开发中，遇到了一个问题，在el-dialog 弹框中，调用了详情页面组件，然后点击按钮让弹框出现，发现只能触发一次详情组件中的mounted钩子里的方法，再次点击弹框出现，就不在走mounted里了

经过多次调试，终于找到原因了，这是element的dialog组件本身存在的问题， dialog作为父组件调用子组件时，仅仅只渲染了一次，就不在进行渲染。

解决方法：

在el-dialog标签外边加上一个div标签，加上v-if ，条件和dialog出现的条件一致，这样每次渲染完都会进行摧毁，再重新调用组件，每次都走mounted里了。。。。。。。

代码示例：

<div v-if="previewFilePop">
      <el-dialog title="流程匹配分析结果预览" :visible.sync="previewFilePop" width="80%" v-loading="fullscreenLoading" @close="closePopClick">
        <span>
          <detail id="downloadDetailFile" :detailItem="detailItem" @loadingClose="loadingClose"></detail>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closePopClick">取 消</el-button>
          <el-button type="primary" @click="downloadFileSure">下载pdf文件</el-button>
        </span>
      </el-dialog>
    </div>

标签

#elementui #vue.js #javascript