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)

我该怎么做？

我需要在什么地方过滤？

我很确定我可以通过在type上设置child-one道具，然后使用this.$children.filter(child => child.$attrs.type === 'special')来做到这一点，但是我想基于它们是{ {1}}个组件。

我正在尝试简化示例，但这是针对选项卡式页面的，因此我对条件渲染不感兴趣。我正在尝试将标记转换为不同的DOM输出，并且需要过滤特定类型的子代。

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

Answer 1

通过设置特定的属性以用作过滤条件，例如

，没有任何错误或非标准

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

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

在浏览器中，子节点显然是通用的，如果不使用某种标识符就无法正确地相互隔离；例如标记名称，ID，属性或属性。从浏览器的角度来看，通过Vue，React，HTML，本机JS渲染的节点完全相同。

由于您不能使用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>

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

如何根据组件类型在Vue中过滤子组件？

1 个答案: