使用Vue獲取子元素集合可以通過refs和$refs屬性完成。$refs就是一個Object,所有使用了ref特性的元素都將成為它的直接子元素。我們可以使用$refs來獲取子元素集合并對其進行操作。
HTML:
<div>
<p ref="para1">First paragraph.</p>
<p ref="para2">Second paragraph.</p>
<p ref="para3">Third paragraph.</p>
</div>
JavaScript:
this.$nextTick(() => {
const paras = this.$refs; // 獲取所有子元素的ref對象
const paraCollection = []; // 子元素集合
for (let para in paras) {
if (typeof paras[para] === "object" && paras[para].nodeName === "P") {
paraCollection.push(paras[para]);
}
}
console.log(paraCollection); // 輸出子元素集合
})
在上述代碼中,我們先通過$refs獲取到了所有子元素的ref對象,然后遍歷這個對象,如果元素是一個P標簽,就把它加入到一個數組中,最后輸出這個數組。通過這種方法,我們就能夠獲取到指定父組件下所有的P標簽元素。
上一篇vue獲取失敗
下一篇css能考什么名詞解釋