Vue warn: 알 수 없는 사용자 지정 요소: - 구성 요소를 올바르게 등록했습니까?

Vue warn: 알 수 없는 사용자 지정 요소: - 구성 요소를 올바르게 등록했습니까?

저는 신입생입니다. 커스텀 컴포넌트를 사용할 때 다음과 같은 오류가 발생합니다.

Vue warn: 알 수 없는 사용자 지정 요소: - 구성 요소를 올바르게 등록했습니까?

그ModalBase컴포넌트에 사용되는 컴포넌트NoticeModal.vue그리고.NoticeModal에서 사용되는 콘텐트productInfo.vue.

내가 제대로 수입했다고 확신해.NoticeModal에productInfo.vueImport도 합니다.ModalBase.vue에NoticeModal.vue, 및 모든 등록.

하지만 경고는 하나뿐이에요Unknown custom element: <modal-base>

여기 있습니다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, 등록 및 내보냈습니다.

그리고...@/components/index:

import NoticeModal from '@/components/componentsFile/NoticeModal.vue'
import ModalBase from '@/components/componentsFile/ModalBase.vue'
    
export {
  NoticeModal,
  ModalBase
}

components: {
        'NoticeModal': NoticeModal
},

이러한 행은 'NoticeModel'이라는 이름의 구성 요소를 등록했음을 의미합니다.따라서 템플릿 코드에서 이 컴포넌트를 "Notice Model"과 함께 html 태그로 사용해야 합니다.

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

또한 다음 코드를 사용하여 HTML 스타일 태그를 등록하고 notice-modal과 함께 사용할 수 있습니다.

components: {
    'notice-modal': NoticeModal
}

이 에러가 발생할 가능성이 있는 다른 이유.이름이 같고 확장자가 다른 파일이 두 개 있습니다.

예를 들어 My Component.vue와 MyComponent.js가 같은 폴더에 있습니다.

My Component.js에서 이 오류를 해결하기 위해 이름을 추가했습니다. export const componentWorker = { hello: (p1) => {console.log('hello from (JS) ' , p1)}, name: "JSCompWorker" } 이런 일이 항상 일어나는 것은 아니다 - 나는 다른 이름이 있다.vue와 samename.filter는 하나의 폴더에 저장되며 문제 없습니다.

구성 요소를 직접 가져와야 합니다.예를 들어 다음과 같습니다.

대신

import {ModalBase} from '@/components/index';

놓다

import ModalBase from '@/components/ModalBase.vue';

언급URL : https://stackoverflow.com/questions/50408041/vue-warn-unknown-custom-element-mycompont-did-you-register-the-component-c