vue3 element-plus，el-dialog组件内，没办法通过ref获得组件

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

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有下面这些事件：

经过测试，发现可以通过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>

测试结果如下：

这篇好文章是转载于：学新通技术网