Vue 3 - 带有全局组件的“无法解析组件”答案

【问题标题】：Vue 3 - "Failed to resolve component" with global componentsVue 3 - 带有全局组件的“无法解析组件”
【发布时间】：2023-12-12 04:53:01
【问题描述】：

当在* HTML 文件中声明时，我的 Vue 组件可以正常工作，就像这样

<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 警告]：无法解析组件：<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>

【问题讨论】：

标签： javascript vue.js vue-component vue-cli vuejs3

【解决方案1】：

在根组件的components 选项中注册组件不会使它们成为全局的。这只是意味着它们是在本地为该根组件注册的。

要注册全局组件，请使用app.component：

const app = Vue.createApp({});
app.use(store);
app.component('headerBar', _headerBar);
app.component('journalCard', _journalCard);
app.component('journalPage', _journalPage);
const mountedApp = app.mount('#app');

【讨论】：

代码中的 _vue 是什么。我正在使用 VueJS 3，它似乎没有暴露 Vue。
@RanjanKumar 这就是 OP 选择将他的 Vue 导入命名的方式，向上滚动查看。您可以随意命名导入。最好改用Vue。
如果您来自 Inertia.js，请确保导入该特定组件。