在vue插槽中嵌套一个插槽

Question

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

接受组件A-接受组件B -接受一个条件-如果条件为真:用组件A包装组件B并呈现-否则只呈现组件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>

然后，当我们实现时，它看起来像--如下所示：

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

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

在本例中，如果是 a link，那么让用包装槽包装内容(可以是任何组件/元素)。如果存在e 225E 126，则不是E 227，那么让我们将E 128仅呈现内容E 229而不使用包装链接。非常简单的逻辑，但我似乎误解了一些基本的vue功能，因为这个特定的示例不起作用。

，我的代码或有什么问题吗?是否有某种原生api已经实现了这个或，也许是，一个已经在执行之类的依赖？

输出应该如下所示：

wrapIf === true

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

wrapIf === false

content

Answer 1

只需关注内容本身，让组件担心是否要包装默认设置或命名内容插槽。

如果您需要包装器是动态的，动态分量应该解决这个问题。我已经相应地更新了我的解决方案。因此，如果需要包装器成为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>

​