在前端開發(fā)中，很常見的一種需求就是讓一個元素的高度占滿整個父元素，這個需求可以通過設(shè)定元素的高度為100%來實現(xiàn)，但是在使用Vue實現(xiàn)這個需求時，卻會遇到一些問題。在使用Vue的過程中，我們可能會發(fā)現(xiàn)設(shè)置height: 100%并不能讓元素占滿整個父元素，這個問題很常見，但也很容易解決。

<div class="parent">
<div class="child" :style="{ height: parentHeight }">
...
</div>
</div>

上面是一個Vue的模板代碼，我們可以看到在這個代碼中，我們使用了一個屬性:style="{ height: parentHeight }"來設(shè)置元素的高度為父元素的高度，但是實際情況下，這個代碼并不能讓元素的高度占滿整個父元素，這是因為Vue中使用height: 100%并不能讓元素的高度占滿整個父元素，因為Vue的父子組件之間存在著一層虛擬DOM節(jié)點，需要將這個節(jié)點設(shè)置為100%，才能讓元素的高度占滿整個父元素。

<div class="parent">
<div class="child" :style="{ height: parentHeight }" ref="child">
...
</div>
</div>

在上面的代碼中，我們使用了一個ref="child"來標記這個子組件，這樣我們就可以通過Vue的$nextTick方法來獲取到這個組件，并且獲取到它的父元素的高度

mounted() {
this.$nextTick(() =>{
const parentHeight = this.$refs.child.parentNode.offsetHeight
this.parentHeight = parentHeight + 'px'
})
},
data() {
return {
parentHeight: ''
}
}

在上面的代碼中，我們可以看到在mounted鉤子函數(shù)中，我們使用了$nextTick方法來獲取到這個組件的父元素的高度，然后將高度存儲到parentHeight這個數(shù)據(jù)變量中，并綁定到.child這個類名的元素上，這樣就可以使元素的高度占滿整個父元素了。

綜上所述，我們可以看到在Vue中使用height: 100%設(shè)置元素的高度無效的問題是因為Vue的父子組件之間存在著一層虛擬DOM節(jié)點，需要將這個節(jié)點設(shè)置為100%，才能讓元素的高度占滿整個父元素。要解決這個問題，我們需要在mounted鉤子函數(shù)中獲取到這個虛擬節(jié)點的高度，并將其賦值給元素的height屬性。