vue 通过ref 给dom设置高度不起作用?

单身狗保护协会
  • 642
<el-col :span="7" ref="wrap"><div></div></el-col>

mounted () {
    let height =document.body.clientHeight
    console.log(height)
    console.log(this.$refs.wrap)
    // this.$refs.wrap.style.height = height
  }

图片描述

输出的this.$refs.wrap,并不是一个dom,不知是哪里出了问题?

回复
阅读 14k
3 个回答
donglegend
  • 905
✓ 已被采纳

这里是使用错误。
ref有两种情况:
第一,如果在普通的 DOM 元素上使用,引用指向的就是 DOM 元素。
第二,如果用在子组件上,引用就指向组件实例。

你这种情况,就是第二种,应用在组件上,那么如果想要获取dom,需要使用

this.$refs.wrap.$el

来获取组建的跟容器dom节点,然后设置样式。

当然如果你想设置slot里面的元素,那么在拿到 根容器dom节点后,就可以通过正常的querySelector等方法获取你想要的任何dom节点了

如果还有问题,欢迎再次讨论。?

拿到的是组件, ref 加载具体的 DOM 元素上

$refs.wrap 拿到的是一个VUE组件,并不是一个DOM。
如果想要手动操作DOM,在组件内给节点一个ID,比如el-col上给一个ID,然后用this.$el.querySelector(#ID)拿到来进行操作。

宣传栏