vue.js - Vue：如何拥有条件槽组件？

Question

我有一个 10 个数组，items其中一半与 . type: 'Normal'，另一半与type: 'Variant'. 我试图将它们传递给MyComponent然后插入，Component1如果类型是Normal，Component2则插入如果type是Variant。

我遇到了一个问题，因为我一直被Component1排在所有 10 次位置，而不是一半Component1一半Component2

家长

 <MyComponent :items="items">
    <template v-slot="slotProps">
      <Component1
        v-if="slotProps.item.type === 'Normal'"
      />
      <Component2
        v-if="slotProps.item.type === 'Variant'"
        :class="$style.gridCover"
      />
    </template>
  </MyComponent>

我的组件.vue

   <template v-for="(item, index) in items">
        <div
          :key="index"
          :class="$style.gridItem"
        >
          <slot :item="item"></slot>
        </div>
    </template>

标签： vue.jsvuejs2vue-component

Answer 1

1. 在MyComponent.vue中创建两个名称槽

2. 然后v-if在MyComponent.vue中使用，而不是在 Parent