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

Question

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

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

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

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

我的问题如下：

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

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

如何实施？

我尝试使用插槽，但我不知道如何自定义渲染子组件。如果没有使用插槽，this.$children则为空，因此我不知道要渲染哪些过滤器。

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

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

然后FilterGroup可以动态导入和渲染过滤器组件。甚至可以传递额外的数据。但是，我认为由此产生的 API 可读性较差且对开发人员不友好。

有没有更好的办法？

Answer 1

使用作用域插槽可以解决您的问题吗？然后，您可以提供自定义渲染子组件。 JSFiddle

Vue.component('filter-group', {
  template: `
  <div class="filter-group">
    <slot :items="items">
    </slot>
  </div>
  `,
  data: function() {
    return {
      items: [1, 2, 3, 4, 5]
    }
  }
})

Vue.component('filter-a', {
  template: `
  <div class="filter-a">
    filter a: {{ items }}
  </div>
  `,
  props: ['items']
})

Vue.component('filter-b', {
  template: `
  <div class="filter-b">
    filter b: {{ items }}
  </div>
  `,
  props: ['items']
})

new Vue({
  el: '#app'
})