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

【问题标题】：Vue Slot: How to parse then render slot componentsVue Slot：如何解析然后渲染插槽组件
【发布时间】：2019-03-07 02:28:59
【问题描述】：

目前在 Vue 中构建网页，但在解析和渲染 <slot> 的子组件时遇到了一些问题。

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

我的尝试

我尝试了很多变化，大多数都是从这个开始的：this.$slots.default

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

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

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

潜在问题

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

我没有正确地将组件放入阵列中
我没有正确渲染它们或错过了一些关于它们如何渲染的内容
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>

【问题讨论】：

你在哪个钩子上使用，请提供更多代码
为您添加了更多上下文。
有什么错误，我认为你需要在你的计算属性中添加return tabs
它在里面，我只是不小心把它从sn-p上剪掉了

标签： javascript vue.js vue-component

【解决方案1】：

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

Render functions - Vue docs

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

【讨论】：