如何为 Vue 组件实现策略模式

Question

事情就是这样。 我有一个Cat 、 Dog和Horse ，它们都实现了Animal接口。 对于其中的每一个，我都有一个DogComponent 、 CatComponent和HorseComponent 。

问题：

如何创建一个AnimalComponent组件，它接受任何Animal但在它是Dog的情况下呈现DogComponent而不使用switch-case或<template>中的一堆v-if ？

请假设仅渲染不同的imageUrl和title是不够的。

Answer 1

只需使用Vue 动态组件:)

这个特殊的组件根据is属性中提供的名称呈现一个组件。

<template>
  <component v-for="animal in animals" :is="`${animal.type}-component`"/>
</template>

<script>
// vue syntax omitted for simplicity
animals: [
  { type: 'dog' },
  { type: 'cat' },
]
</script>