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>
该组件内部包含另一个名为 user-card 的组件。
我想要得到的是一个包含所有名为“用户卡”的组件的数组,无论它们嵌套在许多其他组件中。
这样做的原因是因为我想在选择(单击)用户时将名称的颜色更改为蓝色,并在未选择元素时更改为黑色
我发现使用this.$children
i 可以获取组件内的组件列表,但不是全部,所以我想知道是否有办法通过组件名称获取所有元素的列表
解决方案
您可以使用这段简单的代码:
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
推荐阅读
- sql - 错误 #2014 调用存储过程时命令不同步
- node.js - 反应和表达:从公共文件夹中获取图像
- jenkins - X 射线扫描未在 Jenkins 管道中完成
- r - 从R中的字符串中提取多个数值
- c - C程序只运行第一个循环然后停止
- angular - Angular & Jest:注入 window.URL.createObjectURL
- r - 在闪亮的 Markdown 文档上运行 JS 命令
- postgresql - 使用 docker-compose 将 PostgresSQL JDBC 驱动程序添加到 all-spark-notebook
- python - 预测和比较不同月份的数据
- c++ - 如何自然平移音频样本数据?