: Unbekanntes benutzerdefiniertes Element: <cc-text-area> – Haben Sie die Komponente korrekt registriert?

Question

我正在制作一个组件InputText.vue，如下所示：

<template>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <h4>Text bearbeiten:</h4>
                <textarea class="form-control" cols="50" rows="4" placeholder="Geben Sie hier Text ein..." v-model="textBoxInput" @keyup="textChanged"></textarea>
            </div>
        </div>
    </div>
</template>


<script>
    Standard exportieren{
        Daten: Funktion(){
            zurückkehren {
                textBoxInput: ""
            }
        },
        Methoden: {
            textChanged: function(){
                this.$emit('displayTextChanged', this.textBoxInput);
            }
        }
    }
</script>

然后我在 CardFront.vue 组件中注册并使用它，如下所示：

<style>
    .edit-area {
        Polsterung: 20px;
        Höhe: 800px;
        Hintergrundfarbe: #d2f9f9;
    }

    .card-display {
        Polsterung: 20px;
        Höhe: 800px;
    }
</style>


<Vorlage>
    <div class="row">
        <div class="card col-sm-6 edit-area">
            <cc-text-area></cc-text-area>
        </div>
        <div class="card col-sm-6 card-display">

        </div>
    </div>
</template>


<script>
    TextInput aus „./TextInput.vue“ importieren

    Standard exportieren{
        Komponenten: {
            ccTextArea: TextInput
        }
    }
<script>

它给出了这个错误： 错误

请帮帮我。我正在使用 Vue 版本 2。每当我尝试刷新页面时，它都会给出如下错误: [Vue-Warnung]: Unbekanntes benutzerdefiniertes Element: - 你是否正确注册了组件？对于递归组件，请确保提供“名称”选项.

Answer 1

检查文件名和组件名称是否匹配。

如果您在使用组件中从“./TextInput.vue”导入 TextInput，那么还要确保为您的组件命名，并且可以选择添加 name 属性按照评论中的建议。

// TextInput.vue (not InputText.vue)

export default {
  name: 'TextInput',
  
  ...
}

Answer 2

我解决了这个问题。非常感谢大家的帮助。问题在于 CardFront.vue 组件中的结束脚本标记。