Question

我有两个名为Header和Link的组件，我正在使用TypeScript和VueJS。您可以在

下面看到组件内容

- Header.vue

<template>
    <div class="cHeader">
        {{content}}
    </div> 
</template>

<script lang="ts">
import { TextBase } from "./TextControls"
import { Enums } from "./Enums"
import { Component, Prop } from 'vue-property-decorator';

@Component
export default class Header extends TextBase {
    constructor() {
        super();
        this.type = "header";
        this.content = "Add Header Here";
        this.textAlign = Enums.TextAlign.Center;
    }
} 
</script>

- Link.vue

<template>
    <a v-bind:href="href" v-bind:target="target">Click Me!</a>
</template>
<script lang="ts">
    import { TextBase } from "./TextControls"
    import { Enums } from "./Enums"
    import { Component, Prop } from 'vue-property-decorator';

    @Component
    export default class Link extends TextBase {
        constructor() {
            super();
            this.href = "#";
            this.target = Enums.HrefTarget.None;
            this.type = "link";
        }

        public href: string;
        public target: string;
    }
</script>

当我想通过推入数组添加这些组件时，它们无法正确呈现。您可以在下面看到我尝试导入组件的示例

- Document.vue

<template>
    <div class="documentContainer">
       <div v-for="c in components" class="component">
           <component :is="c.type"></component>
       </div>
    </div>
</template>

<script lang="ts">
    import Vue from "vue";
    import { Component, Prop } from 'vue-property-decorator';
    import { ComponentBase } from "../components/TextControls"
    import Header from "../components/Header.vue"
    import Link from "../components/Link.vue"
    @Component
    export default class Document extends Vue {

        public components: Array<any> = [];
        constructor(){
            super();
            create(Header);
            create(Link);
        }
        create<T>(type: (new () => T)): void {
            let t = new type();
            this.components.push(t);
        }
    }
</script>

通常它应该是v-for循环div标签中的两个组件，但它不会运行。您对建立这些组件有什么建议吗？

Answer 1

一段时间后我找到了答案。

首先：不要使用原始标签名称作为组件名称（我使用标题和链接）

第二：我在document.vue文件中使用了以下模板

<div v-for="c in components" class="component">
     <component v-bind:is="c.type"></component>
</div>

在运行时使用和添加Vue组件

1 个答案: