Question

我是新生，当我使用自定义组件时，它给了我这个错误：

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

组件NoticeModal.vue中使用的'ModalBase'组件。

productInfo.vue中使用了

和'NoticeModal'组件

我确定我在productInfo.vue中正确导入了NoticeModal，并在NoticeModal.vue中导入了ModalBase.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'都已在此文件中正确导入，注册和导出。

@ /组件/索引

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

export {
    NoticeModal,
    ModalBase
}

Answer 1

components: {
        'NoticeModal': NoticeModal
},

这些行表示您已注册名为＆＃39; NoticeModel＆＃39;的组件。因此，在您的模板代码中，您应该将此组件与＆＃34; NoticeModel＆＃34;作为html标签。

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

您还可以使用以下代码注册HTML样式标记，并将其与 notice-modal

一起使用

components: {
    'notice-modal': NoticeModal
}

Vue警告：未知的自定义元素：<mycompont> - 您是否正确注册了组件？

1 个答案: