$refs是Vue實例提供的一個屬性，可以讓我們在模板或者其他方法中訪問組件、元素或指令。一般情況下，我們使用$refs來直接訪問一個組件或者元素的方法或?qū)傩浴?/p>

但是$refs還有一個常用的功能，就是遍歷組件或元素。通過遍歷$refs，我們可以輕松地訪問到組件或元素的各種屬性和方法。

<div>
<my-component ref="component1"></my-component>
<my-component ref="component2"></my-component>
</div>
export default {
methods: {
traverse() {
// 遍歷my-component組件
const components = this.$refs;
for (const key in components) {
const component = components[key];
if (component instanceof MyComponent) {
console.log(component.prop1);
component.method1();
}
}
}
}
}

上面的代碼演示了如何通過$refs遍歷組件。首先，我們在模板中定義了兩個my-component組件，并給它們分別指定了ref屬性。在組件的方法traverse中，我們獲取了所有的$refs，然后通過for...in循環(huán)遍歷每個$refs。如果當(dāng)前遍歷到的$refs是MyComponent類型，就可以調(diào)用它的prop1和method1方法。

需要注意的是，$refs遍歷的順序并不是我們在模板中定義的順序。因此，如果需要按照模板順序遍歷組件，就需要在組件的mounted鉤子函數(shù)中獲取組件的$el元素，并通過元素的previousElementSibling和nextElementSibling屬性來實現(xiàn)。