vue在el-dialog中this.$refs的值为undefined的问题

踩坑在el-dialog中打印this.$refs的值为undefined

vue中元素上加上ref属性取值，相当于取整个元素的，和("#id")类似。但是要用此属性需要了解加载时间，从官网上可以看到关于ref注册时间的重要说明：因为ref本身是作为渲染结果被创建的,在初始渲染的时候你不能访问他们--他们还不存在！$refs也不是响应式的，因此你不应该试图用他在模板中作为数据绑定。

一般用法就是在mounted方法中加入this.$nextTick(()=>{})

mounted() {
  this.$nextTick(() => { // 页面渲染完成后的回调
    this.ul_Height=this.$refs.ulheight.offsetHeight
  })
}
//this.$refs.ulheight==undefined

但是如果$refs在el-dialog中用上述方法还是会undefined,如下：

<el-dialog
    class="fileLibraryDialog"
    title="文件库"
    :visible.sync="fileLibraryData.isShow"
    >
    <ul ref="ulheight" class="groupTree">
        ……
    </ul>
 </el-dialog>

解决的方法就是在el-dialog中加入回调函数@open，然后在回调函数方法中用this.$nextTick。

<el-dialog
    class="fileLibraryDialog"
    @open="getUlHeight"
    title="文件库"
    :visible.sync="fileLibraryData.isShow"
    >
    <ul ref="ulheight" class="groupTree">
        ……
    </ul>
 </el-dialog>
//js部分:
methods:{
  getUlHeight(){
    this.$nextTick(()=>{ 
      this.ul_Height=this.$refs.ulheight.offsetHeight
    })
  }
}