：未知的自訂元素：<cc-text-area> - 您是否正確註冊了元件？

Question

我正在製作一個元件InputText.vue，如下所示：

<template>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group">
                <h4>Edit Text:</h4>
                <textarea class="form-control" cols="50" rows="4" placeholder="Enter text here..." v-model="BoxInputt;Enter text here..." v-model="BoxInput" ></textarea>
            </div>
        </div>
    </div>
</template>


<script>
    export default{
        data: function(){
            return {
                textBoxInput: ""
            }
        },
        methods: {
            textChanged: function(){
                this.$emit('displayTextChanged', this.textBoxInput);
            }
        }
    }
</script>

然後我在 CardFront.vue 元件中註冊並使用它，如下所示：

<style>
    .edit-area {
        padding: 20px;
        height: 800px;
        background-color: #d2f9f9;
    }

    .card-display {
        padding: 20px;
        height: 800px;
    }
</style>


<template>
    <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>
    import TextInput from './TextInput.vue'

    export default{
        components: {
            ccTextArea: TextInput
        }
    }
<script>

它給了這個錯誤： 錯誤

請幫幫我。我正在使用 Vue 版本 2。每當我嘗試刷新頁面時，它都會給出如下錯誤： [Vue warn]: Unknown custom element: - 你是否正確註冊了組件？對於遞歸組件，請確保提供“名稱”選項。

Answer 1

檢查檔案名稱和元件名稱是否符合。

如果您在使用元件中從「./TextInput.vue」匯入TextInput，那麼也要確保為您的元件命名，並且可以選擇新增name 屬性按照評論中的建議。

// TextInput.vue (not InputText.vue)

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

Answer 2

我解決了這個問題。非常感謝大家的幫忙。問題在於 CardFront.vue 組件中的結束腳本標記。