VUE2用ref获取不到DOM元素

vue element-ui，使用 this.$refs 无法获取 el-dialog 下的元素

问题描述

在使用ref获取element ui中dialog组件下form表单元素时，发现获取不到表单DOM，打印this.$refs.formRef显示undenfind

经过排查，发现是因为获取DOM元素的时候（我是在mounted中获取DOM的），dialog组件还没被还没打开，dialog上的form也没被渲染上去，这种情况下，form在页面中并不存在，元素不存在的话，元素上的属性当然是获取不到的

解决

在dialog组件的open()方法里面，使用以下方法进行获取，亲测如果不使用Vue.nextTick的话，能打印出来this.$refs但是还是获取不到form的DOM

 Vue.nextTick(function () {console.log(this.$refs.formRef)}).

总结

1、VUE2用ref获取DOM元素，必须要等页面中的ref子组件加载完毕，才可以获取到

2、在mounted之前的生命周期函数中获取不到，可以用this.$nextTick(()=>{})进行获取