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

Question

<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,不知是哪里出了问题？

Answer 1

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

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

this.$refs.wrap.$el

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

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

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

Answer 2

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

Answer 3

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