logo标签列表

Vue 3 - 全局组件出现"Failed to resolve component"错误

javascriptvue.jsvue-componentvue-clivuejs3
28

当我在顶级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 warn]: 未能解析组件: journal-card at <JournalPage>.

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

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


（Note: The translated text is in Simplified Chinese.）
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>
5个回答
43

在根组件的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');
1
关键部分是我在挂载应用程序后添加组件的顺序。上面的例子是完美的解决方法。 - Khagesh
1

另外顺便提一下，由于在搜索引擎中查找“Vue 3 Failed to resolve component”问题时，此页面会显示出来，因此有几个在Vue 3 / Quasar 2中已被弃用的东西：

例如 q-side-link 静默消失了（先前的文档在此）

根据这个 评论:

QSideLink -- 不再需要！只需使用 QItem 或任何您想要的组件，并将 @click="$router.push(...)" 绑定到它上面。

如果不是完全相关的话，很抱歉，但它会影响其他人，所以我更愿意通过这个评论帮助一个人；-)

0
0
对我来说，这是在数组中声明组件。
components: [ActiveUser, UserData]

应该是一个对象的内容：
components: {ActiveUser, UserData}
-1

确保挂载代码最后执行

app.mount('#app')    
app.component('list-view', ListView2)

是错误的，它不会起作用，但是

app.component('list-view', ListView2)
app.mount('#app')

是正确的。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接