小编Can*_*ian的帖子

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

Vue warn: Unknown custom element: - 您是否正确注册了组件？

ModalBase组件中使用的组件和NoticeModal.vue中 NoticeModal使用的组件productInfo.vue。

我确信我已正确导入NoticeModal并productInfo.vue导入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 …

我Vue 3.0.5使用Webpack 5.21.2和创建了一个应用程序Webpack CLI 4.5.0。我构建了一个全局组件my-component.js：

import SecondComponent from './second-component.vue';
app.component('global-component', {
  template: `
    <div>
      <h1>Hi!</h1>
      <second-component></second-component>
    </div>
  `,
 components: {
   SecondComponent
 }
})

导入的second-component.vue：

<template>
  <div>
    <div>{{someData}}</div>
    <third-component :name="helloWorld"></third-component>
  </div>
</template>

<script>
import ThirdComponent from './third-component.vue';
export default {
 name: 'second-component',
 components: {
   ThirdComponent 
 },
 data: function () {
   return {
     someData: 'Just some data!',
     helloWorld: 'Hello World!',
   }
  }
}
</script>

第三个组件third-component.vue：

<template>
  <div>
    <div>{{name}}</div>
  </div>
</template> …