element-plus中，el-dialog组件内无法通过ref获得组件实例mindmap.value 应该怎么解决

本文链接：https://blog.csdn.net/jyl4855/article/details/135417454

文章讲述了在Vue中使用ElementUI的el-dialog组件时，由于内容的懒加载特性，如何在打开对话框后获取ref实例并解决相应问题。作者提到需在open事件回调的nextTick方法中执行DOM操作，确保在DOM渲染完成后获取ref。

摘要由CSDN通过智能技术生成

遇到的问题：el-dialog组件获取ref实例遇到报错

<div class="dialog">
    <el-dialog :width="width" v-model="dialogFormVisible" 
          @close="emit('update:dialogFormVisible')">
      <div class="dialogues-content" ref="mindmapContainer" v-loading="loading">
        <!-- 这个div是为了使用html2canvas把svg保存成png时使用的-->
        <svg ref="mindmap" class="mindmap"></svg>
        <div class="buttons">
          <div class="change" @click="saveToWord">导出成文件</div>
          <div class="exports" @click="saveToPng">导出成图片</div>
        </div>
      </div>
    </el-dialog>
  </div>

后面查了百度：
对话框中的内容是懒加载的，这意味着在对话框打开之前，默认插槽（个人理解为el-dialog标签内的内容）不会被渲染到DOM上。因此，如果你需要执行一个DOM操作或通过ref访问组件，可在open事件回调中进行。

<el-dialog :width="width" v-model="dialogFormVisible" 
     @close="emit('update:dialogFormVisible')" @opened="opened">
      <div class="dialogues-content" ref="mindmapContainer" v-loading="loading">
        <!-- 这个div是为了使用html2canvas把svg保存成png时使用的-->
        <svg ref="mindmap" class="mindmap"></svg>
        <div class="buttons">
          <div class="change" @click="saveToWord">导出成文件</div>
          <div class="exports" @click="saveToPng">导出成图片</div>
        </div>
      </div>
 </el-dialog>

const opened = () => {
  nextTick(() => {
    console.log(mindmap.value);
    init()
  })
}

ok解决