vue2.0的小坑——当Element UI 中的el-dialog包含子组件时，refs报undefind的问题

最新推荐文章于 2025-07-25 16:27:24 发布

原创

最新推荐文章于 2025-07-25 16:27:24 发布 · 1.2w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#Element Ui #vue #$refs

在Vue2.x中，通常通过$refs调用子组件方法，但当子组件位于Element UI的el-dialog内时，可能会遇到$refs undefined的错误。原因是组件生成顺序的影响。解决办法是使用延时函数调整执行队列，确保在dialog渲染完成后调用子组件的方法。

<el-dialog
   title="提示"
   :visible.sync="dialogCreate"
   width="30%"
   @open="look()"
   :before-close="handleClose">
    <app-form ref="appForm" v-bind:row="row" v-bind:

最低0.47元/天解锁文章

新学期VIP享超值加赠

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Leon_94

关注关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue 调用子组件方法失败_vue父组件引用子组件方法显示undefined问题原因及解决方法...

weixin_39839478的博客

12-29

2779

1.首先导入子组件并且在components中定义子组件2.引用子组件,并定义ref,ref定义的名称用于 this.$refs所调用的名称3.调用子组件的方法 (getLoanApplyInfo()为子组件的方法)。但是我在调用子组件的方法时 (this.$refs.pboc.getLoanApplyInfo()方法)，出现了getLoanApplyInfo未定义的异常。这个问题出现肯定是我没有...

vue页面传值总结（列表详情两种方式el-dialog弹窗新页面）以及query Parmas $router $router区别

weixin_45170083的博客

05-08

4571

一.说起Vue页面传值，大家都会想到的是路由的三种传值方式，二.我们看列表详情也有两种方式，一种是通过弹窗的形式el-dialog，一种是通过路由跳转新页面的方式，三.记住新页面详情，往往需要我们先把我们点击所属列表的ID传过去，再在新页面调用接口（附带我们得到传来的ID作为参数）然后渲染到我们本条数据的详情四.由下面的router和router 和router和rouer 说一下两种区别 ...

1 条评论您还未登录，请先登录后发表或查看评论

vue2.0中this.$refs获取子组件属性报undefined错误

最新发布

sofzl01265的博客

07-25

1105

本文针对ElementUI中el-dialog与el-table组合使用时的自适应高度问题，提出了一套完整的解决方案。通过分析弹窗内部结构，建立标题栏、内容区和底部按钮区的尺寸关系，推导出动态计算表格高度的核心公式。方案包含初始化计算、窗口resize响应、弹窗拉伸适配等关键功能，并提供了详尽的Vue组件实现代码。特别处理了无底部按钮、自定义标题栏高度、百分比高度弹窗等边界场景，通过防抖优化避免性能问题。最终实现表格高度随弹窗尺寸自动调整，确保内容完美展示，同时提供可应用于嵌套弹窗、带搜索栏表格等扩展场景的

（转）Vue.js 用 $refs 调用子组件的方法时出现 undefined

CaseyWei

12-15

1517

使用 ref 来定位 DOM 节点很方便。但是期间遇到了一个问题，就是在生命周期 mounted 钩子函数里面使用 this.$refs.xx，打印出来的却是 undefined？如果在 DOM 结构中的某个 DOM 节点使用了 v-if、v-show 或者 v-for（即根据获取到的后台数据来动态操作 DOM，即响应式），那么这些 DOM 是不会在 mounted 阶段找到的。因为 updated 与 mounted 不同的是，在每一次的 DOM 结构更新，Vue.js 都会调用一次 updat

vue $ref 引用子组件方法时报undefine

m0_37684037的博客

04-29

1069

说明：关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！ $refs也不是响应式的，因此你不应该试图用它在模板中做数据绑定。 $refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱” ——应该避免在模板或计算属性中访问 $refs。 ...

前端踩坑小结:当elementui的el-dialog组件中包含子组件时，用refs调用子组件时的undefined问题

qq_39861508的博客

01-02

2万+

今天开发VUE我在elementui的el-dialog组件中包含了一个子组件。然后我通过$refs调用该子组件里面的方法，在控制台上却显示undefined。因为自己之前用过refs来调用子组件方法，但是没有遇到过这种问题，刚开始自己觉得可能是因为执行顺序的问题，就用promise来写。可以看到还是同样的问题，后来找到了一个土方法s

vue element ＜el-dialog＞标签内表单验证坑记录

小学僧的学习笔记

05-08

1217

发生情况：在dialog中写表单验证，dialog框关闭后表单验证还存在解决：关闭时直接销毁dialog v-if

对话框中使用el-input和el-tree做树形组件表单元素，解决点击其他区域树形组件无法自动收回的bug

qq_27470647的博客

04-01

3355

对话框中表单某一项以树的形式展示，点击el-input弹出el-tree树形组件后如果不继续点击选择树节点而是点击其他地方（或者直接关闭对话框），树形组件收不回去了（不能像下拉框表单一样自动隐藏收回去），这个是有解决办法的，通过给body绑定click事件，然后判断鼠标点击的dom(event.target)是不是点击弹出树形组件的那个input或者树形组件本身，如果不是，就让树形组件隐藏，如果是...

Vue2 + ElementUI开发中的十大常见“坑“及避坑指南

m0_72812480的博客

07-10

545

本文基于真实项目经验，总结Vue2项目中集成ElementUI时高频出现的陷阱问题，涵盖表单验证、表格渲染、样式覆盖等核心场景，提供原创解决方案和最佳实践。

前端踩坑小结:当element-ui的el-dialog组件中包含子组件时，用refs调用子组件时的undefined问题【转载】

风不知从何处起的小屋

02-11

1136

最近在用dialog调用子组件时发现打印为undefined，加载顺序的问题分享一个找到的实测可行的解决办法原文今天写VUE时我在element-ui的el-dialog组件中包含了一个子组件。然后我通过$refs调用该子组件里面的方法，在控制台上却显示undefined。因为自己之前用过refs来调用子组件方法，但是没有遇到过这种问题，很是无奈加之彷徨。后来在度娘怀里遨游一番，发现和element-ui框架有关系，总之什么关系呢，我也说不清啦。直接看解决方法吧。首先，你要确保你的e-dial

当elementui的el-dialog组件中包含子组件时，用$refs调用子组件时的undefined问题

优氪时

04-28

1030

elementui的el-dialog弹框组件中包含了一个子组件。 <el-dialog :title="titleMap[dialogStatus]" :visible.sync="dialogFormVisible" width="60%"> <el-form :rules="rules" ref="dataForm" :model="dataForm" label-position="right" label-width="130px"> <e

VUE2用ref获取不到DOM元素

weixin_51293134的博客

08-18

1729

1、VUE2用ref获取DOM元素，必须要等页面中的ref子组件加载完毕，才可以获取到2、在mounted之前的生命周期函数中获取不到，可以用this.$nextTick(()=>{})进行获取。

vue，在el-dialog弹出框使用ref失效解决

fjxzxw的博客

04-12

601

这是弹出框还是加载完就去使用它了，可以使用$nextTick，在渲染完再使用ref。在弹出框中使用ref，引起失效问题。

vue父组件通过$refs调用子组件方法时报undefined的问题

南北极之间

03-31

4008

1，vuejs怎样调用子组件里的方法？给引用过来的子组件加ref，然后选中这个ref就可以使用方法了：参考： https://www.jianshu.com/p/01c7e752684e 2，vue父组件通过$refs调用子组件方法时报undefined的问题解决办法：参考： https://blog.csdn.net/m0_46156566/article/details/106476362 ...

vue通过父组件调用子组件方法报错 this.$refs.questionInfo is undefined

qq_53825610的博客

11-16

991

在js里通过 this.$refs.questionInfo.getList();调用子组件方法，界面报错 this.$refs.questionInfo is undefined。时，子组件尚未完全挂载。Vue在编译和渲染过程中是异步执行的，因此在访问。错误可能是因为尝试访问子组件的。之前，需要等到子组件完全挂载。

vue项目常见问题一--------------获取不到子组件的值以及解决方法

大佐

06-19

3616

1.在父组件打印this.$refs子组件的值，然后报错undefined! 在页面加载完成打印第二个子组件，报错，因为第二部分没有加载所以写的时候加个判断控制，赋值的时候也加上条件控制，就不会报错了下图参考然后tab切换的时候v-if的值对应改变。 ...

一文读懂Vue中的el-dialog（附Demo）

码农研究僧的博客

04-15

7493

el-dialog 是 Element UI 框架中的一个组件，用于创建对话框提供了丰富的功能和选项，可以用来创建各种类型的对话框，如信息确认框、表单填写框等

element-ui dialog问题：1.dialog的确定取消按钮没有自动靠右

tangcc的博客

12-08

7378

1.dialog的确定取消按钮没有自动靠右 <el-dialog :title="spec_formTitle" :visible.sync="specform_DialogVisible" width="70%"> <el-form :model="spec_form" label-position="right" ref="spec_form&qu

Vue 2.0 Element-UI el-select选择器显示问题及解决方案

在Vue 2.0版本的Element UI中，用户可能遇到一个问题，即在`el-select`选择器中，尽管选择了选项并且`change`方法被正确触发，但选中的内容并未在UI上显示。这个问题通常出现在如下的`select.vue`组件中： ```html ...