vue3 element-plus中，el-dialog组件内，无法通过ref获得组件实例

「已注销」

已于 2023-10-20 16:06:00 修改

阅读量6.8k

点赞数 20

分类专栏： about vue 文章标签： vue.js javascript 前端 vue elementui

于 2022-07-26 15:56:39 首次发布

本文链接：https://blog.csdn.net/hookind/article/details/125996256

版权

about vue 专栏收录该内容

3 篇文章

订阅专栏

面对这个问题，我在官方文档上找到下面这样一段描述：

The content of Dialog is lazily rendered, which means the default slot is not rendered onto the DOM until it is firstly opened. Therefore, if you need to perform a DOM manipulation or access a component using ref, do it in the open event callback.

中文大意为：

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

我查了下elementplus的官方网站，el-dialog有下面这些事件：

el-dialog事件
经过测试，发现可以通过opened事件回调（open不行），可以访问el-dialog中组件的实例。下面是一段测试代码。

<template>
  <div>
    <h1 ref="outsideDialogRef01">对话框之外：你好</h1>
    <el-dialog
      title="videoTitle"
      v-model="dialogVisible"
      :fullscreen="true"
      :before-close="handleClose"
      @opened="opened"
      @close="closing"
    >
      <h1 ref="inDialogRef01">对话框之内： Hello, world</h1>
      <div ref="inDialogRef02">对话框之内： 12345678</div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";

const dialogVisible = ref(false);

const handleClose = () => {
  dialogVisible.value = false;
};

const outsideDialogRef01 = ref(null);

const inDialogRef01 = ref(null);

const inDialogRef02 = ref(null);

onMounted(() => {
  console.log("======mounted======");
  console.log("outsideDialogRef01", outsideDialogRef01.value);
  console.log("inDialogRef01", inDialogRef01.value);
  console.log("inDialogRef02", inDialogRef02.value);
});

const showDialog = () => {
  dialogVisible.value = true;

  console.log("======showing======");
  console.log("outsideDialogRef01", outsideDialogRef01.value);
  console.log("inDialogRef01", inDialogRef01.value);
  console.log("inDialogRef02", inDialogRef02.value);
};

const opening = () => {
  console.log("======opening======");
  console.log("outsideDialogRef01", outsideDialogRef01.value);
  console.log("inDialogRef01", inDialogRef01.value);
  console.log("inDialogRef02", inDialogRef02.value);
};
const opened = () => {
  console.log("======opened======");
  console.log("outsideDialogRef01", outsideDialogRef01.value);
  console.log("inDialogRef01", inDialogRef01.value);
  console.log("inDialogRef02", inDialogRef02.value);
};

const closing = () => {
  console.log("======closing======");
  console.log("outsideDialogRef01", outsideDialogRef01.value);
  console.log("inDialogRef01", inDialogRef01.value);
  console.log("inDialogRef02", inDialogRef02.value);
};

defineExpose({
  showDialog,
});
</script>

测试结果如下：

测试结果