如何为 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 simplicityanimals: [  { type: 'dog' },  { type: 'cat' },]</script>