代码之家 › 专栏 › 技术社区 › agm1984

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

vuejs2 javascript

agm1984 · 技术社区 · 6 年前

我在识别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') ,但我想根据它们是 儿童一号 组件。

我试图使示例简单化,但这是针对标签页的,所以我对条件呈现不感兴趣。我正在尝试将标记转换为不同的dom输出,并且需要筛选特定类型的子项。

我研究过 $attrs 和 $options 作为钩子,我可以使用,但如果我使用属性,我需要添加一个道具到每个组件。我想避免,因为它们都是 儿童一号 是的。我似乎也不能将静态属性添加到 儿童一号 是的。这个 美元期权 字段总是空的。

1 回复 | 直到 6 年前

Abana Clara 6 年前

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

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

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

在浏览器中,子节点显然是泛型的,如果不使用某种标识符(如标记名、id、属性或属性),则无法正确地彼此隔离。通过vue、react、html、native js呈现的节点在浏览器的透视图中都是相同的。

因为你不能使用组件名 child-one 因为它们将像普通的html一样呈现,所以您只需简单地向vue模板上的每个组件包装器添加一个attribute/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>

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