Javascript 获取给定组件名称的组件列表，无论它们是否嵌套-Vue

我的应用程序中有以下侧栏：

树项目组件代码为：

 <!-- tree item template -->
 <script type="text/x-template" id="tree-item-template">
    <div>
        <div>
            <user-card @toggle-supervisor="toggle" :user_info="item" :key="item.id_user"></user-card>
        </div>
        <div v-show="isOpen" v-if="isFolder" class="ml-3">
            <tree-item
            v-for="(child, index) in item.employees"
            :key="index"
            :item="child"
            ></tree-item>
        </div>
    </div>
</script>

此组件包含另一个名为用户卡的组件

我想得到的是一个数组，其中包含所有名为“用户卡”的组件，而不管它们嵌套在许多其他组件中

这是因为我想在选择（单击）用户时将名称的颜色更改为蓝色，而在未选择元素时将名称的颜色更改为黑色

---

我发现使用

this.$children

我可以获得组件内部的组件列表，但不是所有组件，因此我想知道是否有办法通过组件名称获得所有元素的列表

您可以使用以下简单的代码：

const child=this.$children.slice（）；
常数卡=[]；
让cur；
while（child.length>0）
{
cur=child.shift（）；
if（cur.$options.name===‘用户卡’）cards.push（cur）；
其他的
{
cur=cur.$children.slice（）；
对于（设i=0；i

slice（）在这种情况下做什么？在这种情况下，

slice（）

防止您破坏组件内的原始子数组。没有它，您将在控制台中获得奇怪的行为甚至错误。