如何為 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>