如何根据组件类型过滤Vue中的子组件？答案

【问题标题】：How to filter children components in Vue based on their component type?如何根据组件类型过滤Vue中的子组件？
【发布时间】：2018-09-07 02:20:12
【问题描述】：

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

我在这里有这个标记：

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

    <child-two>
    </child-two>

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

parent 组件是功能性的，所以它正在这样做：

render(createElement) {
    return createElement('div', this.$slots.default);
},

我想遍历 this.$children 并返回一个类似这样的 VNode 数组：

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

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

我该怎么做？

我需要过滤什么以及在哪里过滤？

我很确定我可以通过在child-one 上设置一个type 属性，然后使用this.$children.filter(child => child.$attrs.type === 'special') 来做到这一点，但我想根据它们是child-one 组件的事实来过滤它们。

我试图使示例简单，但这是针对标签页的，所以我对条件渲染不感兴趣。我正在尝试将标记转换为不同的 DOM 输出，我需要过滤特定类型的子项。

我研究了$attrs 和$options 作为我可以使用的钩子，但是如果我使用attrs，我需要为每个组件添加一个prop。我想避免这种情况，因为它们都是child-one 类型。我似乎也无法向child-one 添加静态属性。 $options 字段始终为空。

【问题讨论】：

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

标签： javascript vuejs2

【解决方案1】：

通过设置一个特定的属性来用作过滤标准，例如

this.$children.filter(child => child.$attrs.type === 'special')

如果您的子组件是其他非组件标记的兄弟，或者您不想过滤的那些，那么您别无选择，只能设置一个 prop 指示它们是您需要的组件。

在浏览器中，子节点显然是通用的，如果不使用某种标识符，就无法正确地相互隔离；例如标签名称、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>

或者您可以在组件本身上添加属性，这是我以前从未尝试过的，所以我无法为您提供帮助

【讨论】：