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

Posted 2023-02-23

【中文标题】Vue Slot：如何解析然后渲染插槽组件

【英文标题】：Vue Slot: How to parse then render slot components

【发布时间】：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上剪掉了

【参考方案1】：

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

Render functions - Vue docs

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