在 vue 的插槽中嵌套插槽 [英] Nesting a slot in a slot for vue
本文介绍了在 vue 的插槽中嵌套插槽的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
更新:这是我在这里尝试实现的简化版本(来自下面的线程对话):
<块引用>接受组件 A - 接受组件 B - 接受一个条件 - 如果条件为真:用组件 A 包裹组件 B [并渲染]- 仅其他渲染组件 B.
我对创建一个有条件地呈现包装器的组件感兴趣.我认为像这样的理论方法可能是最好的**:**
<div><slot v-if="wrapIf" name="wrapper"><插槽名称="内容"></插槽></slot><slot v-else name="content"></slot></模板><脚本>导出默认{道具: {wrapIf:布尔值，}}
然后当我们实施时，它看起来如下:
<代码>...<wrapper-if :wrap-if="!!link"><a :href="link" slot="wrapper"><slot></slot></a><模板槽=内容">内容</模板></wrapper-if>
这个想法是，在这种情况下，如果有一个链接，然后让我们用包装槽(可以是任何组件)包装内容/element). 如果没有，那么让我们只呈现内容，而不用包装的链接.非常简单的逻辑，但似乎我误解了一些基本的 vue 功能，因为这个特定的例子不起作用.
我的代码有什么问题或是否有某种本机api已经实现了这个或也许依赖这种事情已经发生了吗?
输出应如下所示:
wrapIf === true
内容</a>wrapIf === false
内容 解决方案
只关注内容本身，让组件担心要不要封装 default 或 命名 内容槽.
如果您需要包装器是动态的，动态组件 应该解决这个问题.我已经相应地更新了我的解决方案.因此，如果您需要将包装器作为 label 元素，只需将 tag 属性设置为它，依此类推.
const WrapperIf = Vue.extend({模板:`<div><component :is="tag" v-if="wrapIf" class="wrapper"><插槽名称="内容"></插槽></组件><slot v-else name="content"></slot>`，道具: ['wrapIf', 'tag']});新的 Vue({el: '#app',数据() {返回 {链接:'https://stackoverflow.com/company'，tagList: ['p', 'label'],标签:'p',包裹:真实}},成分: {WrapperIf}})
.wrapper {显示:块；填充:10px；}p.wrapper {背景颜色:浅灰色；}标签.包装{背景色:薰衣草；}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script><div id="应用程序"><wrapper-if :wrap-if="wrap" :tag="tag"><a :href="link" slot="content">内容</a></wrapper-if><div>更改包装类型:<select v-model="tag"><option v-for="tag in tagList">{{tag}}</option></选择><button @click="wrap = !wrap">切换包装器</button>
