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

Question

所以事情是这样的。我有一个Cat,Dog和 ，Horse它们都实现了该Animal接口。对于每一个，我都有一个DogComponent,CatComponent和HorseComponent。问题：如何创建一个在不使用或一堆s 的情况下AnimalComponent接受任何Animal但渲染的组件？DogComponentDogswitch-casev-if<template>请假设仅渲染不同的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>