Javascript 如何根据组件类型筛选Vue中的子组件？

我在识别Vue中的子组件时遇到问题

我在这里有这样的标记：

<parent>
    <child-one>
    </child-one>

    <child-two>
    </child-two>

    <child-one>
    </child-one>
</parent>

我想迭代

this.$children

并返回一个类似以下类型的vnode数组：

const matchingChildren = this.$children
    .filter(child => child.isChildOneType === true)

return createElement('div', {}, matchingChildren)

我该怎么做

我需要在哪里过滤什么

我很确定我可以通过在

子一

上设置

类型

道具，然后使用

this.$children.filter（child=>child.$attrs.type=='special'）

，来实现这一点，但我想根据它们是

子一

组件的事实对它们进行过滤

我试图使示例变得简单，但这是针对选项卡式页面的，因此我对条件呈现不感兴趣。我试图将标记转换为不同的DOM输出，并且需要过滤特定类型的子项

---

我已经研究了

$attrs

和

$options

作为我可以使用的挂钩，但是如果我使用attrs，我需要为每个组件添加一个道具。我希望避免这种情况，因为它们都是

child-one

类型。我似乎也无法将静态属性添加到

子对象

。

$options

字段始终为空。

通过设置特定属性用作筛选条件，例如

this.$children.filter（child=>child.$attrs.type==='special'）

如果您的子组件是其他非组件标记的同级，或者您的子组件不希望过滤，那么您别无选择，只能设置一个道具，指示它们是您需要的组件

在浏览器中，子节点显然是通用的，如果不使用某种标识符，就无法正确地彼此隔离；例如标记名、id、属性或属性。通过Vue、React、HTML和原生JS呈现的节点在浏览器的透视图中都是相同的

由于不能像

child one

那样使用组件名称，因为它们将像普通HTML一样呈现，因此可以简单地向Vue模板上的每个组件包装器添加一个属性/v-attribute，并在呈现后像普通节点一样过滤掉它们

<parent>
    <child-one>
         <div class="wrapper" componentType="1"></div>
    </child-one>

    <child-two>
         <div class="wrapper" :componentType="data.type"></div>
    </child-two>

    <child-one>
         <div class="wrapper" componentType="1"></div>
    </child-one>
</parent>

---

或者您可以在组件本身上添加属性，这是我以前从未尝试过的，因此我无法帮助您解决此问题。

此。$children.filter（child=>child。$attrs.type==='special'）？如果您的子组件是其他非组件标记的同级，或者您的子组件不希望过滤，那么您别无选择，只能设置一个道具，指示它们是您需要的组件？因为在浏览器中，您使用框架制作的元素与其他方式制作的元素之间没有明显的区别。谢谢，这可能就是我所需要的。我只是不确定。我真的希望有人会这样说，特别是关于它们都是通用节点的。我确实喜欢这样的解决方案，因为这意味着我可以使用任何孩子，并通过添加道具来瞄准他们。如果你能将你的评论转化为答案，并给我几天时间开发一个防弹解决方案，我会将其标记为正确的，除非其他人有更多的向导解决方案。我在寻找一个像你这样的想法，让我有信心追求这个方向。但你是对的，它们是通用的节点，如果没有特定的标志/属性，你几乎没有办法逐个过滤掉它们。至少我不知道。当然，让我构造一个看起来不像评论的好答案。谢谢

<parent>
    <child-one>
         <div class="wrapper" componentType="1"></div>
    </child-one>

    <child-two>
         <div class="wrapper" :componentType="data.type"></div>
    </child-two>

    <child-one>
         <div class="wrapper" componentType="1"></div>
    </child-one>
</parent>