如何使用ES6类在Vue.js中实现派生渲染实现

对于此查询的长度，我们事先表示歉意。

在React中，我可以在任何返回JSX.Element的标准ES6类上使用render函数。这很出色，因为它允许我派生ES6类，其中每个派生类都实现自己的JSX呈现实现-请参见下面的（ts）示例：

export class Colour {
  public name: string = "";

  constructor(name) {
    this.name = name;
  }

  public render(): JSX.Element {
    return <span>Error, no colour specified</span>;
  }
}

export class Red extends Colour {
  constructor() {
    super("red");
  }
  public render(): JSX.Element {
    return <div style={{ color: this.name }}>Hi, I am {this.name}!</div>;
  }
}

export class Blue extends Colour {
  constructor() {
    super("blue");
  }
  public render(): JSX.Element {
    return <h2 style={{ color: this.name }}>Hi, I am {this.name}!</h2>;
  }
}  

然后，在React组件中，我可以创建一个可以轻松呈现的Color对象列表，如下所示：

function App() {
  const list = [];
  list.push(new Red());
  list.push(new Blue());
  list.push(new Red());

  const listItems = list.map(item => <li key={item}>{item.render()}</li>);

  return (
    <div className="App">
      <h1>React derived rendering </h1>
      <ul>{listItems}</ul>
    </div>
  );
} 

结果是这样的：

一切都很好...

现在我的问题是：在Vue.js中，有什么方法可以轻松地做到这一点吗？请注意-对我而言，在代码中创建许多派生实例并将其添加到要呈现的列表中很重要！

现在，我能做的最接近的工作是创建一个虚拟Vue组件，当它渲染时，我实际上调用派生的实现来交出渲染句柄“ h”。

Vue.component("fusion-toolbar", {
  props: ["items"],
  template: `
            <div>
                <div v-for="item in items" 
                    v-bind:key="item.code" >
                        <f-dummy v-bind:item='item'></f-dummy>
                </div>
            </div>
        `
});

Vue.component("f-dummy", {
  props: ["item"],
  render(h) {
    return this.item.render(h);
  }
});

export class Colour {
    public colour: string = "";

    constructor(colour: string) {
        this.colour = colour;
    }

    render(h: any) {
        return h("h1", "Hello, I am " + this.colour);
    }

}

export class Red extends Colour {
    constructor() {
        super("red");
    }

    render(h: any) {
        return h("h2", "Hello, I am " + this.colour);
    }
}

export class Blue extends Colour {
    private _isDisabled = true;

    constructor(disabled: boolean) {
        super("blue");
        this._isDisabled = disabled;
    }

    render(h: any) {
        return h('div',
            [
                h('h4', {
                    class: ['example-class', { 'conditional-class': this._isDisabled }],
                    style: { backgroundColor: this.colour }
                }, "Hello, I am " + this.colour)
            ]
        )
    }
}

然后在我的父列表组件中，我有：

<template>
  <div id="app"><fusion-toolbar v-bind:items="myitems"> </fusion-toolbar></div>
</template>

<script>
import { Red, Blue } from "./Colour";

export default {
  name: "App",
  data: function() {
    return {
      myitems: []
    };
  },
  mounted() {
    this.myitems.push(new Red());
    this.myitems.push(new Blue(false));
    this.myitems.push(new Blue(true));
  }
};
</script>

这是最好的方法吗？欢迎任何反馈...