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

Question

我的应用中有以下侧边栏：

树项组件代码为：

 <!-- 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>

该组件内部包含另一个名为 user-card 的组件。

我想要得到的是一个包含所有组件的数组，这些组件的名称为“用户卡”，无论它们嵌套在许多其他组件中。

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

我发现使用this.$children我可以获取组件内部的组件列表，但不是全部，所以我想知道是否有办法通过组件名称获取所有元素的列表

Answer 1

你可以使用这段简单的代码：

        const child = this.$children.slice();
        const cards = [];
        let cur;
        while (child.length > 0)
        {
          cur = child.shift();
          if (cur.$options.name === 'user-card') cards.push(cur);
          else
          {
            cur = cur.$children.slice();
            for (let i = 0; i < cur.length; i++) child.push(cur[i]);
          }
        }
        // now you have your user cards inside the "cards" array