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

最新推荐文章于 2024-07-23 10:29:33 发布
最新推荐文章于 2024-07-23 10:29:33 发布
阅读量1.1w 收藏 5
点赞数
分类专栏： vue 文章标签： Element Ui vue $refs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_36422236/article/details/79449087
版权
在Vue2.x中，通常通过$refs调用子组件方法，但当子组件位于Element UI的el-dialog内时，可能会遇到$refs undefined的错误。原因是组件生成顺序的影响。解决办法是使用延时函数调整执行队列，确保在dialog渲染完成后调用子组件的方法。
摘要由CSDN通过智能技术生成 
<el-dialog
   title="提示"
   :visible.sync="dialogCreate"
   width="30%"
   @open="look()"
   :before-close="handleClose">
    <app-form ref="appForm" v-bind:row=
最低0.47元/天 解锁文章
Leon_94
关注
专栏目录
vue 调用子组件方法失败_vue父组件引用子组件方法显示undefined问题原因及解决方法...
weixin_39839478的博客
12-29 2657
1.首先导入子组件并且在components中定义子组件2.引用子组件,并定义ref,ref定义的名称用于 this.$refs所调用的名称3.调用子组件的方法 (getLoanApplyInfo()为子组件的方法)。但是我在调用子组件的方法时 (this.$refs.pboc.getLoanApplyInfo()方法)，出现了getLoanApplyInfo未定义的异常。这个问题出现肯定是我没有...
vue2.0中this.$refs获取子组件属性报undefined错误
断了的弦的博客
07-24 3万+
首先，要强调一点，我的re被用来给子组件注册引用信息，引用信息注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例： 当我调用下面这个语句想要改变子组件的data中的uid属性时候 this.$refs.historyRecord.uid=uid; 报如下错误： 查询资料和vue官方文档之后，发现是我...
elementui el-dialog 的二次封装
最新发布
h1606641309的博客
07-23 748
在main.js 文件中引入我们的二次疯转组件 如下。
（转）Vue.js 用 $refs 调用子组件的方法时 出现 undefined
CaseyWei
12-15 1449
使用 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 989
说明： 关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的， 在初始渲染的时候你不能访问它们 - 它们还不存在！ $refs也不是响应式的，因此你不应该试图用它在模板中做数据绑定。 $refs 只会在组件渲染完成之后生效，并且它们不是响应式的。 这仅作为一个用于直接操作子组件的“逃生舱” ——应该避免在模板或计算属性中访问 $refs。 ...
前端踩坑小结:当element-ui的el-dialog组件中包含子组件时，用refs调用子组件时的undefined问题【转载】
风不知从何处起的小屋
02-11 1029
最近在用dialog调用子组件时发现打印为undefined，加载顺序的问题 分享一个找到的实测可行的解决办法 原文 今天写VUE时我在element-ui的el-dialog组件中包含了一个子组件。 然后我通过$refs调用该子组件里面的方法，在控制台上却显示undefined。 因为自己之前用过refs来调用子组件方法，但是没有遇到过这种问题，很是无奈加之彷徨。后来在度娘怀里遨游一番，发现和element-ui框架有关系，总之什么关系呢，我也说不清啦。直接看解决方法吧。首先，你要确保你的e-dial
vue element ＜el-dialog＞ 标签 内表单验证坑记录
小学僧的学习笔记
05-08 1122
发生情况：在dialog中写表单验证，dialog框关闭后表单验证还存在 解决： 关闭时直接销毁dialog v-if
对话框中使用el-input和el-tree做树形组件表单元素，解决点击其他区域树形组件无法自动收回的bug
qq_27470647的博客
04-01 3238
对话框中表单某一项以树的形式展示，点击el-input弹出el-tree树形组件后如果不继续点击选择树节点而是点击其他地方（或者直接关闭对话框），树形组件收不回去了（不能像下拉框表单一样自动隐藏收回去），这个是有解决办法的，通过给body绑定click事件，然后判断鼠标点击的dom(event.target)是不是点击弹出树形组件的那个input或者树形组件本身，如果不是，就让树形组件隐藏，如果是...
element-ui的form表单校验踩坑
weixin_47783830的博客
08-21 1213
今天查看项目，发现了一个小小的bug，之前从来没注意过，记录下。 管理系统的修改跟增加功能用的同一个表单，只是通过判断显示不同的内容。而修改时跟增加时的验证也不一样，由此，出现了一些奇怪的事情，先看看代码： 这是我改完之后故意写错的问题： <el-form :ref="fuleCalorificForm" :rules="rules" label="left" :model="fuleCalorificForm" la
elment ui 组件bug总结
IT博客技术分享
04-04 3599
一、.element-ui dialog设置为点击弹窗以外的区域不关闭弹窗 第一种: 在el-dialog标签中添加:close-on-click-modal="false"即可 <el-dialog title="标题" :close-on-click-modal="false" :visible.sync="dialogEnrol" width="30%"> 弹窗内容 </el-dialog> 第二种:全局设置 在mian.js里面： import Elem.
vue父组件通过$refs调用子组件方法时报undefined的问题
南北极之间
03-31 3508
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 793
在js里通过 this.$refs.questionInfo.getList();调用子组件方法，界面报错 this.$refs.questionInfo is undefined。时，子组件尚未完全挂载。Vue在编译和渲染过程中是异步执行的，因此在访问。错误可能是因为尝试访问子组件的。之前，需要等到子组件完全挂载。
vue项目常见问题一--------------获取不到子组件的值以及解决方法
大佐
06-19 3520
1.在父组件打印this.$refs子组件的值，然后报错undefined! 在页面加载完成打印第二个子组件，报错，因为第二部分没有加载 所以写的时候加个判断控制，赋值的时候也加上条件控制，就不会报错了 下图参考 然后tab切换的时候v-if的值对应改变。 ...
elementui Dialog对话框,显示偏移问题
u010914880的博客
11-13 7010
#当显示dialog的时候页面会有padding-right:15的偏移这时候可以在页面设置一个样式 body{padding-right:0px!important}覆盖就行了
vue项目中父子组件在调用方法的时候出现undefined
OnlyJally的博客
10-25 2278
1. 使用vue中this.$nextTick() 2. 可以使用setTimeout
vue通过this.$refs引用子组件出现undefined或者is not a function的错误
热门推荐
ACodeBird
11-09 4万+
1.出现undefined错误 包含子组件的标签需要放在<template></template>中第一个子标签的子标签中，而且需要设置ref属性，通过该属性调用子组件的方法或者属性，例如 <template> <a-card :bordered="false"> <s-table> ... </s-t...
vue2.0中集成并使用ueditor，解决第一次编辑器正常加载，第二次就不加载的问题，父组件调用子组件的方法
chuxialia的博客
12-27 1481
vue2.0中集成并使用ueditor，解决第一次编辑器正常加载，第二次就不加载的问题，父组件调用子组件的方法
【Vue】this.$refs.xxx 报错undefined解决办法
慕白Lee的博客
07-03 6787
因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。适用于特定场景, 然后第一次渲染不执行,需要注意的是定义的变量需要在子组件下, 不然也是获取不到的。，如果你使用v-if 、v-for渲染页面的话，那么在刚开始页面没没渲染之前你是拿不到。的时候提示undefined, 一开始以为方式失灵了,后来是发现。的，所以要等到页面渲染之后拿才可以。调用子组件里的函数，页面初始化的时候调用。
Vue 2.0 Element-UI el-select选择器显示问题及解决方案
在Vue 2.0版本的Element UI中，用户可能遇到一个问题，即在`el-select`选择器中，尽管选择了选项并且`change`方法被正确触发，但选中的内容并未在UI上显示。这个问题通常出现在如下的`select.vue`组件中： ```html ...
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值