【vue && 弹窗】vue项目弹窗中的组件编辑ref值却获取不到

原创于 2021-03-10 15:56:12 发布

· 4k 阅读

5 ·

版权

文章标签：

#vue #vue ref值获取不到

vue工作专栏收录该内容

26 篇文章

订阅专栏

本文介绍在Vue项目中如何正确地通过this.$refs获取到子组件的引用。当在弹窗显示后需要访问其内部子组件时，直接调用this.$refs可能无法立即获取到子组件，文中提供了一种解决方案：利用Vue的生命周期钩子$nextTick来确保DOM更新后获取子组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue项目中点击打开弹窗，弹窗上面有子组件，在点击打开弹窗的方法中使用this.$refs却获取不到子组件的ref值：

简易代码如下：

<a-modal centered v-model="visible" :title="title">
   <upload ref="upload" />
</a-modal>

js:


        handleOpenUpload(){
            this.visibleUpload = true;
            console.log('refs',this.$refs.upload); //获取不到
        }

解决：

handleOpenUpload(){
            this.visibleUpload = true;
            this.$nextTick(() => {
                console.log('refs',this.$refs.upload);//能获取
            });
        }