Предупреждение: неизвестный пользовательский элемент: <myCompont>- правильно ли вы зарегистрировали компонент?

Question

Я новичок, когда я использую пользовательские компоненты, мне выдается эта ошибка:

Vue warn: Unknown custom element: <modal-base> - did you register the component correctly? 

компонент ModalBase, используемый в компонентах NoticeModal.vue.

и компонент NoticeModal, используемый в productInfo.vue

Я уверен, что я правильно импортировал NoticeModal в productInfo.vue, а также импортировал ModalBase.vue в NoticeModal.vue и все зарегистрированные.

но я получаю единственное предупреждение: Неизвестный пользовательский элемент:.

ModalBase.vue

<template>
    <div>
        <div class="modal-header">
            <slot name="header">
                <p class="title">This is base</p>
            </slot>
        </div>
    </div>
</template>
<script>
    export default {
        name: "ModalBase",
        data() {
            return {show: ''}
        }
    }

</script>

NoticeModal.vue

<template>
    <div class="noticeModal">
        <modal-base>
            <div slot="header">hello</div>
        </modal-base>
    </div>
</template>
<script>
    import {ModalBase} from '@/components/index';

    export default {
        name: "NoticeModal",
        props: ['modalOptions'],
        components: {
            ModalBase
        },
        data() {
            return {show: ''}
        }
    }
</script>

productInfo.vue

<template>
    <div>
        <notice-modal></notice-modal>
    </div>
</template>
<script>
    import {NoticeModal} from '@/components/index';

    export default {
        name: "productInfo",
        components: {
            'NoticeModal': NoticeModal
        },
        data() {
        }
    }
</script>

========== Кстати, '@ / components / index' этот путь верен, и «NoticeModal», и «ModalBase» были импортированы, зарегистрированы и экспортированы правильно в этом файле.

@ / components / index

import NoticeModal from '@/components/componentsFile/NoticeModal.vue'
import ModalBase from '@/components/componentsFile/ModalBase.vue'

export {
    NoticeModal,
    ModalBase
}

Answer 1

components: {
        'NoticeModal': NoticeModal
},

Эти строки означают, что вы зарегистрировали компонент с именем «NoticeModel».Поэтому в коде вашего шаблона вы должны использовать этот компонент с «NoticeModel» в качестве HTML-тега.

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

Также вы можете использовать следующий код, чтобы зарегистрировать тег стиля HTML и использовать его с note-modal

components: {
    'notice-modal': NoticeModal
}