如何在 vue.js 中呈现多态列表？

Question

考虑：

class X {}
class B extends X {}
class C extends X {}

在一个组件中，我有一个 X 数组：

<template>
    <ul>
        <li v-for="item in items">
            <a-view v-if="item.constructor.name === 'A'"></a-view>
            <b-view v-if="item.constructor.name === 'B'"></b-view>
        </li>
    </ul>
</template>

export default {
    ...
data() {
    return {
        items: [new A(), new B()]
    }
}

这有效，但并不优雅。类型检查使用字符串，其中item instanceof B将是惯用的 es6 代码。但是，这不起作用。

在 vue.js 中呈现多态列表的惯用方式是什么？

Answer 1

Component 关键字必须是您要查找的内容，如下所示：

<li v-for="item in items">
  <component v-bind:is="item"></component>
<li>

来自 Vue 文档的参考

这是一个例子：https : //codesandbox.io/s/k2mwrj6w3r