vue.js - 将插槽嵌套在 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>

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

我的代码有什么问题，或者是否有某种本机 api已经实现了这一点，或者可能是一个已经完成这种事情的依赖项？

输出应如下所示：

wrapIf === true

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

wrapIf === false

content

标签： vue.jsnestedslot

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>