Vue 3 - "Failed to resolve component" 具有全局组件

Question

我的 Vue 组件在顶级 HTML 文件中声明时工作正常，就像这样

<body>
  <div class='app' id='app'>        
    <header-bar id='headerBar'></header-bar>        
    <journal-page></journal-page>
  </div>
  <script src="js/app.js"></script>
</body>

但是在 <journal-page> 组件中使用 <journal-card> 组件给我错误：

[Vue warn]: Failed to resolve component: journal-card at <JournalPage>.

请问我该如何解决这个问题？

这是我加载 Vue 组件的顶级代码，app.js:

import * as _vue from 'vue';
import _headerBar from './widgets/headerBar.vue';
import _journalCard from './widgets/journalCard.vue';
import _journalPage from './widgets/journalPage.vue';
import _store from './data/store.js';

const app = _vue.createApp
({
    components: 
    {
        'headerBar': _headerBar,
        'journalCard': _journalCard,
        'journalPage': _journalPage     
    },
    data : _store,
    methods: {}
});
const mountedApp = app.mount('#app');

这是我的 journal-page.vue 容器

<template>  
  <ul>
    <journal-card v-for="item in journal" :key="item.id" :entry=item></journal-card>
  </ul>
</template>

<script lang="js">
import _store from '../data/store.js';
export default {
  'data': _store
};
</script>

和journal-card.vue组件

<template>
  <div>
    hi imma journal entry
  </div>
</template>

<script lang="js">
export default {
  'data': null,
  'props': [ 'entry' ]
};
</script>

Answer 1

在根组件的 components 选项中注册组件不会使它们成为全局组件。这样做只会让它们对根组件本身可用，而不是它的子组件。

要全局注册组件，请在顶级代码中使用 app.component：

main.js

import { createApp } from 'vue';
import App from './App.vue';
import MyGlobalComponent from './components/MyGlobalComponent.vue';

const app = createApp(App);
app.component('MyGlobalComponent', MyGlobalComponent); ✅
const mountedApp = app.mount('#app');

Vue 3 - "Failed to resolve component" 具有全局组件

Vue 3 - "Failed to resolve component" with global components

javascript

vue.js

vue-component

vue-cli

vuejs3