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

Reference from Vue documentation

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