vue.js - 无法在模板中使用 vuejs 组件

Question

我有一个带有打字稿和 webpack 的 vuejs 应用程序。我试图制作一个用于添加新客户的表单组件。为此，我有一个 .vue 文件：

<template>
    <v-dialog max-width="600px">
        <v-card>
            <v-card-title>
                <div>
                    <h3 class="headline primary--text">Account</h3>
                </div>
            </v-card-title>

            <v-card-actions>
                <v-spacer />
                <v-btn flat @click="cancel">cancel</v-btn>
                <v-btn color="primary" flat :disabled="!validFormData" @click="submit">save</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>

<script src="./CustomerForm.ts"></script>

和 CustomerForm.ts：

import { Prop, Vue, } from 'vue-property-decorator'
import Component from 'vue-class-component'
import { Customer } from "../../../types/Customer";

@Component
export default class CustomerForm extends Vue {
    @Prop()
    customer!: Customer;

    @Prop()
    value!: boolean;

    validFormData: boolean = true;

    submit() {
        if ((<HTMLFormElement>this.$refs.form).validate()) {
            this.$emit('save', this.customer)
        }
    }

    cancel() {
        (<HTMLFormElement>this.$refs.form).reset();
        this.$emit('input');
    }
}

现在我想将它包含在我的父模板中，当“showForm”为真时我可以打开它：

<customer-form v-model="showForm"/>

但我总是得到这个错误：

Failed to mount component: template or render function not defined.

found in

---> <CustomerForm>
...

我尝试用这个导入它：

import { Vue } from 'vue-property-decorator';
import Component from 'vue-class-component';
import CustomerForm from "./CustomerForm";


@Component({
    components: {
        CustomerForm
    }
})
export default class CustomerManagement extends Vue {
...
}

我认为引用组件有问题？

标签： vue.js

Answer 1

您是否包括以下内容？

import CustomerForm from '@/../CustomerFormComponent.vue';

@Component({components:{CustomerForm}})
export default class ParentClass extends Vue {

你的等待行为也是<customer-form v-model="showForm"/>错误的，应该是这样的<customer-form v-if="showForm"/>