Question

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

接受组件A-接受组件B-接受条件-如果条件为true：用组件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>

这个想法是，在这种情况下，如果存在链接，那么我们用包装器插槽包装内容（可以是任何组件/ element）。 如果没有 ，那么我们仅呈现内容而无需换行链接。逻辑很简单，但是似乎误解了一些基本的vue功能，因为这个特定的示例不起作用。

我的代码有什么问题或是否存在某种本机api 已经实现了此或已经这样了吗？

输出应如下所示：

wrapIf === true

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

wrapIf === false

content

Answer 1

仅关注内容本身，让组件担心是否要包装default或named内容槽。

如果您需要动态包装器，则dynamic component应该可以解决该问题。我已经相应地更新了解决方案。因此，如果您需要将包装器作为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>

在vue的插槽中嵌套插槽

1 个答案: