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

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

上面是一個Vue的模板代碼，我們可以看到在這個代碼中，我們使用了一個屬性:style="{ height: parentHeight }"來設置元素的高度為父元素的高度，但是實際情況下，這個代碼并不能讓元素的高度占滿整個父元素，這是因為Vue中使用height: 100%并不能讓元素的高度占滿整個父元素，因為Vue的父子組件之間存在著一層虛擬DOM節點，需要將這個節點設置為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鉤子函數中，我們使用了$nextTick方法來獲取到這個組件的父元素的高度，然后將高度存儲到parentHeight這個數據變量中，并綁定到.child這個類名的元素上，這樣就可以使元素的高度占滿整個父元素了。

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