Vue插槽:如何解析然后呈现槽组件
Vue插槽:如何解析然后呈现槽组件
提问于 2018-10-01 15:43:04
目前正在Vue中构建一个网页，并且遇到了一些问题解析，然后呈现<slot>的子组件。
我需要能够接受插槽，将组件解析成数组，然后为最终用户呈现这些组件。
我试过的
我尝试了很多不同的东西，大多数都是从以下几个方面开始的：this.$slots.default
这是我最后一次尝试
let slotComponents = [];
this.$slots.default.forEach(vNode => {
slotComponents.push(vNode);
});但是，我也尝试选择vNode中的元素，并使用$childeren之类的东西来选择组件。到目前为止还没有运气。
潜在问题
原因可能有很多，但我认为是这样的(按顺序)
- 我无法正确地将组件放入数组中
- 我没有正确地渲染它们或者遗漏了一些关于它们如何呈现的东西
- 不应该这么做吗？
编辑-上下文
如果我告诉你我的具体问题的全部情况，那就容易多了。
目标
若要创建动态选项卡组件，请执行以下操作。应该是这样的。
// 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>回答 1
Stack Overflow用户
回答已采纳
发布于 2018-10-02 22:56:15
如果要以编程方式在<tab>中呈现<tab-container>，则不应该使用模板和计算属性。模板中的{{}}用于执行JS的基本操作。最合适的方法是使用呈现函数。
下面是一个工作示例，它包含了几个制表符组件，并且只显示了活动选项卡组件：https://jsfiddle.net/ajitid/eywraw8t/403667/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52600261
复制
相似问题
从组件呈现布局中的Vue槽
使用Vue槽在基本组件中呈现组件
如何用槽扩展Vue组件
Vue:如何使用条件槽组件？
Vue组件:在插槽中使用插槽
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
