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

今天写VUE时我在element-ui的el-dialog组件中包含了一个子组件。

Editor为子组件

然后我通过$refs调用该子组件里面的方法,在控制台上却显示undefined。

init方法为dialog弹窗时才会触发的方法
'setHtml' of undefined"

因为自己之前用过refs来调用子组件方法,但是没有遇到过这种问题,很是无奈加之彷徨。

后来在度娘怀里遨游一番,发现和element-ui框架有关系,总之什么关系呢,我也说不清啦。

直接看解决方法吧。

首先,你要确保你的e-dialog组件内已经加了回调函数  @open具体使用方法点击查看element-ui官方文档


@open=“init()”

然后在methods里的init方法内改造之下面这个样子啦:

this.$nextTick(()=>{ xxxxxx })

其实就是加上一个this.$nextTick啦,这个回调函数的意思呢,其实简单理解就是等所有的DOM元素节点都渲染完成以后才执行其里面的方法。具体什么意思呢,请参考百度,这里就不做详细介绍了。


打印出了formData.content

这样就打印出了formData.content的内容啦。

完美解决!!!

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 真是坑,在el-dialog中使用el-carousel组件,想要动态修改幻灯片的当前激活的索引,element官...
    马小帅mm阅读 7,080评论 0 2
  • VUE Vue :数据驱动的M V Vm框架 m :model(后台提供数据),v :view(页面),vM(模板...
    wudongyu阅读 5,426评论 0 11
  • 3. JSX JSX是对JavaScript语言的一个扩展语法, 用于生产React“元素”,建议在描述UI的时候...
    pixels阅读 2,886评论 0 24
  • 反智时代最大特点,就是不能证实也不能证伪甚至不能证优劣的活动中大师们层出不穷,而所谓的深刻全赖以演技派玩...
    慢生活工坊阅读 340评论 0 0
  • 记得第一次见到她是在05年,那时她的出场没有现在惊艳,舞蹈没有现在优美,但是她就是这样深深吸引着我的眼球,然...
    咿呀公子阅读 640评论 0 0