javascript - 在 Vue.js v2 中动态渲染子组件

Question

我正在 VueJS 中构建一个分面搜索系统。总体思路很简单:

FilterGroup 组件包含整个过滤器逻辑。该组件接受各种子组件，例如AttributeXYZFilter。这些子组件负责提供条件，FilterGroup 将使用这些条件来过滤项目集合。

该系统的示例用法如下所示:

<template>
  <FilterGroup :items="items">
    <ABCFilter/>
    <XYZFilter/>
    <AnotherFilter/>
  </FilterGroup>
</template>

我的问题如下:

过滤器组件应由 FilterGroup 在特定布局中呈现。此外，FilterGroup 应该使用 props 为过滤器组件提供一些额外的数据。

为避免不必要的耦合，FilterGroup 不应知道将呈现哪些过滤器。每个过滤器都遵循一个通用的规范/接口(interface)(使用 mixins 实现)。每个过滤器都有自己的 UI 模板。

如何实现？

我试过使用插槽，但我不知道如何自定义呈现子组件。如果没有插槽被使用，this.$children 是空的，所以我不知道要渲染哪个过滤器。

我可以提供这样的过滤器:

<template>
  <FilterGroup :items="items" :filters="['ABCFilter', 'XYZFilter']/>
</template>

然后 FilterGroup 可以动态导入和呈现过滤器组件。甚至可以传递额外的数据。但是，我认为生成的 API 的可读性和开发人员友好性较差。

有没有更好的办法？

Answer 1

我想你会喜欢使用 Dynamic Components为了那个原因。这允许您根据数据动态呈现(子)组件。在您的示例中，过滤器。

:is="ComponentName" 定义了应该渲染的组件。使用 props 传递数据:

<template>
    <div class="app-body row">
        <template v-for="(child, index) in children">
            <component :is="child.viewName" :key="child.name" :data="child.data"></component>
        </template>
    </div>
</template>