将 vue 的槽嵌套在槽中

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

接受组件 A - 接受组件 B - 接受条件 - if 条件为 true ：用组件 A 包裹组件 B [并渲染]- 仅适用于其他情况 渲染组件 B.

I'm有兴趣创建一个有条件地呈现包装器的组件。我估计理论方法这样可能是最好的**：**

<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>

然后当我们实施，它会看起来像这样的东西：

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

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

这个想法是，在这种情况下，如果有is a link,那么让我们使用包装器槽包装内容（可以是任何组件/元素）。 如果有isn't，那么让我们只渲染内容没有包装的链接。非常简单的逻辑，但似乎我误解了一些基本的 vue 功能，因为这个特定的例子不起作用。

我的代码有什么问题 or 是否有某种原生 api已经实现了这一点or也许执行此操作的依赖项已经是这样的事情了吗？

输出应如下所示：

wrapIf === true

<a href="some.link">
    content
</a>

wrapIf === false

content

只需关注内容本身，让组件关心是否包装内容default https://v2.vuejs.org/v2/guide/components-slots.html#Default-Slot-Content or named https://v2.vuejs.org/v2/guide/components-slots.html#Named-Slots内容槽。

如果您需要包装器是动态的，动态组件 https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components应该解决这个问题。我已经相应地更新了我的解决方案。所以如果你需要包装器是label元素，只需设置tag财产，等等。

const WrapperIf = Vue.extend({
  template: `
    <div>
      <component :is="tag" v-if="wrapIf" class="wrapper">
        <slot name="content"></slot>
      </component>

      <slot v-else name="content"></slot>
    </div>
  `,

  props: ['wrapIf', 'tag']
});


new Vue({
  el: '#app',

  data() {
    return {
      link: 'https://stackoverflow.com/company',

      tagList: ['p', 'label'],
      tag: 'p',
      wrap: true
    }
  },

  components: {
    WrapperIf
  }
})

.wrapper {
  display: block;
  padding: 10px;
}

p.wrapper {
  background-color: lightgray;
}

label.wrapper {
  background-color: lavender;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <wrapper-if :wrap-if="wrap" :tag="tag">
    <a :href="link" slot="content">
       content
    </a>
  </wrapper-if>

  <div>
    Change wrapper type:
    <select v-model="tag">
      <option v-for="tag in tagList">{{tag}}</option>
    </select>
  </div>

  <button @click="wrap = !wrap">Toggle wrapper</button>
</div>