Vue如何实现基于item类型条件渲染对应插槽组件？

核心问题排查方向 #

• 条件分支逻辑不严谨：当前两个组件使用独立v-if判断，无兜底逻辑，无法定位匹配失败的原因，建议修改为v-if+v-else-if组合，同时增加临时调试代码确认type的实际值。
• 属性值匹配失败：===严格相等判断对大小写、拼写、空格零容忍，只要item.type的实际值和判断条件存在任何差异，都会导致Component2的判断不生效。

修改后的父组件代码 #

<MyComponent :items="items">
  <template v-slot="slotProps">
    <!-- 临时调试代码，确认type实际值，排查后可删除 -->
    <!-- {{ console.log('当前item类型', slotProps.item.type) }} -->
    <Component1
      v-if="slotProps.item.type === 'Normal'"
    />
    <Component2
      v-else-if="slotProps.item.type === 'Variant'"
      :class="$style.gridCover"
    />
    <!-- 临时兜底节点，匹配失败时展示，排查后可删除 -->
    <!-- <div v-else>类型不匹配：{{ slotProps.item.type }}</div> -->
  </template>
</MyComponent>

其他需要确认的点 #

• 检查items数组中type字段的拼写、大小写，确保和判断条件完全一致，避免出现'normal'、'Varient'这类错误
• 确认Component2已经在父组件中完成注册，未注册组件会被静默忽略，无报错的情况下会出现该组件不渲染的问题
• MyComponent的插槽传值逻辑正确，无需修改

内容的提问来源于stack exchange，提问作者user15909643