鍍金池/ 問答/HTML/ vue 通過ref 給dom設(shè)置高度不起作用？

vue 通過ref 給dom設(shè)置高度不起作用？

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

回答
編輯回答
祉小皓

$refs.wrap 拿到的是一個VUE組件，并不是一個DOM。
如果想要手動操作DOM，在組件內(nèi)給節(jié)點(diǎn)一個ID，比如el-col上給一個ID，然后用this.$el.querySelector(#ID)拿到來進(jìn)行操作。

2017年3月12日 18:53
編輯回答
我不懂

拿到的是組件, ref 加載具體的 DOM 元素上

2018年3月28日 12:18
編輯回答
風(fēng)畔

這里是使用錯誤。
ref有兩種情況：
第一，如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素。
第二，如果用在子組件上，引用就指向組件實例。

你這種情況，就是第二種，應(yīng)用在組件上，那么如果想要獲取dom，需要使用

this.$refs.wrap.$el

來獲取組建的跟容器dom節(jié)點(diǎn)，然后設(shè)置樣式。

當(dāng)然如果你想設(shè)置slot里面的元素，那么在拿到 根容器dom節(jié)點(diǎn)后，就可以通過正常的querySelector等方法獲取你想要的任何dom節(jié)點(diǎn)了

如果還有問題，歡迎再次討論。

2017年5月27日 01:36