使用插槽而不是内联声明会使组件更加灵活吗？

Question

我正在尝试制作一个不太固执己见的网格组件。我有两种不同类型的组件，它们有不同的封面图像，DVD和Cassette。

我认为最好的方法是不像下面这样使用v-if：

Parent.vue

<MyUniversalComponent
   :items="items"
>
</MyUniversalComponent>

MyUniversalComponent.vue

import DVD from '@/components/DVD.vue';
import Cassette from '@/components/Cassette.vue';

<template>
    <div class="grid">
       <div v-for="item in items">
           <div v-if="item.type === 'dvd'">
               <DVD :data="item" />
           </div>
           <div v-else-if="item.type === 'cassette'">
               <Cassette :data="item" />
           </div>
       </div>
    </div>
</template>

是否有更灵活的方法来使用插槽来完成这个任务？我希望它是一个"shell“网格，可以以不同的方式使用，所以我假设我想要去掉让这些组件驻留在这里的逻辑。我能把这个翻译成使用插槽吗？

Answer 1

在这种情况下，比插槽更合适。它使用一个设置组件类型的is支柱，所有绑定都通过解析的组件传递：

<script>
import DVD from '@/components/DVD.vue';
import Cassette from '@/components/Cassette.vue';

export default {
  components: {
    DVD,
    Cassette,
  }
}
</script>

<template>
    <div class="grid">
       <div v-for="item in items">
           <component :is="item.type" :data="item" />
       </div>
    </div>
</template>

演示