站长工具seo下载益韧建筑培训网
el-dialog子组件在mounted周期内获取不到dom？
- 一、问题描述
- 二、分析原因
- 三、猜测
正常父子组件在mounted生命周期内可以获得dom
父created—子created—子mounted—父mounted----子updated—父updated
一、问题描述
** el-dialog控制显示隐藏是css控制的display：none **
在一个弹出框里放Echarts图表。众所周知Vue里是在mounted生命周期里才能获取到DOM，于是我理所应当的：
在mounted阶段用document.querySelector()以及this.$refs获取元素均获取不到。用两种方式获取元素，打印出来的结果都是undefined。
有解答说用this.nextTick(function(){…})，试了一下在我这个场景中，结果还是undefined
二、分析原因
在mounted阶段，若需要获取的元素或组件有v-if，v-for属性。
v-if的初始化结果为false。v-for遍历的数组初始化阶段无值。（即mounted阶段后，根据获得的后台数据来动态操作dom）这两种情况都会导致mounted阶段获取元素的语句获取不到dom。
链接: https://blog.csdn.net/weixin_44582045/article/details/124662065
三、猜测
报错，找不到DOM，无法生成echarts。但mounted里不应该发生这种情况的，所以只有一种可能性：那就是el-dialog和v-if一样，采用默认不生成DOM的方式，只有在弹框出现时才会生成。知道了问题所在，就好解决了：
链接: https://blog.csdn.net/Naaaano/article/details/122349588
// 弹框的触发事件
openDialog() {this.$nextTick(() => {获取dom})
}
或者在子updated生命周期内也可以获得dom