Question

我找到了一些有关以编程方式创建vue组件的答案，但没有找到使用TypeScript的答案。我的应用程序的后端有一个mongodb（用于存储数据）和使用Spring Boot构建的API层。在我的一个组件中，我有一个API调用来从后端获取数据，我想从响应中创建组件。

@Component
export default class LayoutEditor extends Vue {
    public elements: Element[];

    @Prop({type: String, required: true})
    private id: string;

    public created() {
        axios.get('template/layout/' + this.id).then((response) => {
            this.initElements(response.data.elements);
        });
    }

    private initElements(elements: any[]) {
        this.elements = [];
        elements.forEach((element: any) => {
            const elemInst: Element = Element.newInstance(element);
            this.elements.push(elemInst);
        });
    }
}

在模板中：<component v-for="(element) in elements" :is="element"></component>

它可以编译并且不会引发运行时错误，但是不会渲染组件。

@Component
export default class Element extends Vue {

    public static newInstance(obj: any) {
        const element = new Element();
        element.id = ob.id;
        element.data = obj.data;
        return element;
    }

    public id: string;
    public data: any;

}

我也尝试使用以下模式：

const ElementClass = Vue.extend(Element);
const element = new ElementClass();

但是后来我无法设置id和data，因为类型不是元素而是ExtendedVue。

那么，基于某些后端数据来实现这些动态组件的正确方法是什么？

使用TypeScript以编程方式创建Vue组件

0 个答案: