Vue插槽：如何解析然后渲染插槽组件

Question

当前在Vue中构建网页，但在解析然后呈现<slot>的子组件时遇到了一些问题。

  

我需要能够占用插槽，将组件解析为数组，然后为最终用户呈现这些组件。

我尝试过的东西

我尝试了很多变体，其中大部分是从this.$slots.default

开始的

这是我尝试的最后一个版本

let slotComponents = [];
this.$slots.default.forEach(vNode => {
  slotComponents.push(vNode);
});

但是我也尝试过选择vNode中的元素，并使用$childeren之类的元素来选择组件。到目前为止没有运气。

潜在问题

原因可能有很多，但是这就是我认为正在发生的事情（按顺序）

1. 我没有将组件正确放入阵列中
2. 我没有正确渲染它们，或者错过了有关它们渲染方式的东西
3. Vue不应该这样做吗？

编辑-上下文

如果我为您提供特定问题的完整上下文，似乎会更容易。

目标

创建动态选项卡组件。应该看起来像这样。

// Example of component use
<tab-container>
  <tab>
    <!-- Tab Content -->
  </tab>
  <tab>
    <!-- Tab Content -->
  </tab>
  <tab>
    <!-- Tab Content -->
  </tab>
  <trash>
    <!-- This one won't show up -->
  </trash>
</tab-container>

为了解析这些内容，我需要获取广告位数据。

// Inside the <tabs-container> component
computed: {
  tabs: function() {
        let tabs = []
        this.$slots.default.forEach(vNode => {
            tabs.push(vNode);
        });
        return tabs;
    }
}


// Inside the <tabs-container> template
<div>
    {{tabs[currentTab]}}
</div>

Answer 1

如果要在<tab>内以编程方式渲染<tab-container>，则不应使用模板和计算属性。模板中的{{}}用于执行JS的基本操作。最合适的方法是使用渲染功能。

Render functions - Vue docs

这是一个有效的示例，它仅包含几个选项卡组件，并且仅显示活动的选项卡组件：https://jsfiddle.net/ajitid/eywraw8t/403667/