Vue3：热避免加载图像时的许多 v-if 条件，基于 10+ 状态

Question

我有一个视图，其中状态指示要显示的图标。共有 12 种不同的图标/状态。图标本身也是一个 .vue 组件 (

<template><svg...></svg></template>

)。 所以目前我的图标显示有 12 个

v-if

块（见下文）。它看起来是这样的：

<script setup lang="ts">
defineProps<{
  state: 's1' | 's2' | 's3' | ... | 's12';
}>();
</script>
<template>
  <div>
    <IconA v-if="state === 's1'"/>
    <IconB v-if="state === 's2'"/>
    <IconC v-if="state === 's3'"/>
    <!-- repeat for the rest of them... -->
    <IconL v-if="state === 's12'"/>
  </div>
</template>

我想知道是否有更有效/更优雅的方式来表达同样的内容。

Answer 1

使用

<Component/>

：https://vuejs.org/guide/essentials/component-basics#dynamic-components

<script setup lang="ts">
defineProps<{
  state: 's1' | 's2' | 's3' | ... | 's12';
}>();

const icons = {s1:IconA, s2:IconB, ...};

</script>
<template>
  <div>
    <component :is="icons[state]"/>
  </div>
</template>