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

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-container>内渲染出<tab> ，则不应使用模板和计算属性。 模板中的{{}}旨在执行 JS 的基本操作。 最合适的方法是使用渲染功能。

渲染函数 - Vue 文档

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