Vue.js 在vue的插槽中嵌套插槽

更新：以下是我试图实现的目标的简化版本（来自下面的线程对话）：

...
<wrapper-if :wrap-if="!!link">
    <a :href="link" slot="wrapper"><slot></slot></a>

    <template slot="content">
         content
    </template>
</wrapper-if>

接受组件A-接受组件B-接受条件-如果 条件为true：使用组件A[和渲染]包装组件B-仅限else 渲染组件B

我对创建有条件地呈现包装的组件感兴趣。我想像这样的理论方法可能是最好的**：**

<template>
    <div>
        <slot v-if="wrapIf" name="wrapper">
            <slot name="content"></slot>
        </slot>

        <slot v-else name="content"></slot>
    </div>
</template>
<script>
    export default {
        props: {
            wrapIf: Boolean,
        }
    }
</script>

wrapIf==false

content

---

只需关注内容本身，让组件担心是否包装或内容槽

如果您需要包装器是动态的，a应该解决这个问题。我已经相应地更新了我的解决方案。因此，如果您需要包装器成为

标签

元素，只需将

标记

属性设置为它，依此类推

const WrapperIf=Vue.extend({
模板：`
`,
道具：['wrapIf'，'tag']
});
新Vue({
el:“#应用程序”，
数据（）{
返回{
链接：'https://stackoverflow.com/company',
标记列表：['p'，'label']，
标签：“p”，
包装：对
}
},
组成部分：{
包装纸
}
})

.wrapper{
显示：块；
填充：10px；
}
p、 包装纸{
背景颜色：浅灰色；
}
标签包装{
背景颜色：淡紫色；
}

更改包装类型：
{{tag}}
切换包装器

感谢您的回复，但此解决方案采用静态包装器组件/元素。包装器和内容都是任意的。如果我没有说清楚，我道歉。我将更新我的答案。答案已更新。请让我知道这是否解决了您的问题。尽管

wrap===false

@Philll\t问题是您在设置内容和可见性状态时使用了相同的值（通过执行

！！link

），但这似乎仍然会将链接环绕在内容周围，而

链接

不包含URL内容时，它将呈现包装，因为您强制（布尔转换）来自同一源的值。这就是为什么为此，我在数据内部使用一个名为

wrap

的单独值。@phill\t我相信上述解决方案满足这些条件。让我知道你的想法。

content