怎么才能正确的获取到 el-dialog 中的组件 ref?

Question

按照 https://element-plus.gitee.io... 说的,我使用了 "openDialog" 函数获取 "refCompContent",代码类似:

<template>
    <el-dialog ref="refDialog" @open="openDialog">
        <component :is="compContent" ref="refCompContent"/>
    </el-dialog>
</template>

<script>
    const refCompContent = ref(null)
    const openDialog = () => {
        console.log('>>> refCompContent::', refCompContent)
    }
</script>

但 "refCompContent" 是 null,怎么才能正确的获取到 "refCompContent"?谢谢

Answer 1

const refDialog = ref(null)
// ref 引用名称 跟template里面要保持一致

Answer 2

改成这样试试

    const openDialog = () => {
const refCompContent = ref(null)
        console.log('>>> refCompContent::', refCompContent)
    }

Answer 3

你可是把el-dialog打开后再获取refCompContent，否则是会null，因为在没打开dialog之前，在页面查看源码的时候，dialog的div是没有的，类似于v-if。