javascript - 如何根据组件类型过滤 Vue 中的子组件？

Question

我在识别 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 Prop ，然后使用 this.$children.filter(child => child.$attrs.type === 'special')，但我想根据它们是 child-one 组件这一事实来过滤它们。

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

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

Answer 1

通过设置一个特定的属性作为过滤条件没有任何错误或不标准，例如

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

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

在浏览器中，子节点显然是通用的，如果不使用某种标识符，就无法正确地将它们彼此隔离；例如标签名称、ID、属性或属性。通过 Vue、React、HTML、原生 JS 呈现的节点在浏览器的 Angular 来看都是一样的。

由于您不能使用像 child-one 这样的组件名称，因为它们将像普通 HTML 一样呈现，您可以简单地向 Vue 上的每个组件包装器添加一个属性/v-属性模板并在渲染后像普通节点一样简单地过滤掉它们。

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

或者您可以自己在组件上添加属性，我以前从未尝试过，所以我无法帮助您