Vue 3 - “无法解析组件"具有全局组件 [英] Vue 3 - "Failed to resolve component" with global components
问题描述
我的 Vue 组件在顶级 HTML 文件中声明时工作正常，就像这样
<header-bar id='headerBar'></header-bar><journal-page></journal-page><script src="js/app.js"></script>
但是在 <journal-page> 组件中使用
[Vue 警告]:无法解析组件:
我该如何解决这个问题?
这是我加载 Vue 组件的顶级代码，app.js:
import * as _vue from 'vue';从'./widgets/headerBar.vue'导入_headerBar；从'./widgets/journalCard.vue'导入_journalCard；从'./widgets/journalPage.vue'导入_journalPage；从'./data/store.js'导入_store；const app = _vue.createApp({成分:{'headerBar': _headerBar,'journalCard': _journalCard,'journalPage': _journalPage},数据存储，方法: {}});const mountedApp = app.mount('#app');这是我的 journal-page.vue 容器
<ul><journal-card v-for=日记中的项目":key="item.id":entry=item></模板><script lang="js">从'../data/store.js'导入_store；导出默认{'数据存储};和journal-card.vue组件
<div>嗨 imma 日记条目</模板><script lang="js">导出默认{'数据':空，‘道具’:[‘条目’]};
在根组件的 components 选项中注册组件不会使它们全局化.这只是意味着它们在本地为该根组件注册.
注册全局组件，使用app.component:
const app = _vue.createApp({});应用程序使用(商店)；app.component('headerBar', _headerBar);app.component('journalCard', _journalCard);app.component('journalPage', _journalPage);const mountApp = app.mount('#app');My Vue components work fine when declared in the top level HTML file, like this
<body>
<div class='app' id='app'>
<header-bar id='headerBar'></header-bar>
<journal-page></journal-page>
</div>
<script src="js/app.js"></script>
</body>
but using a <journal-card> component inside the <journal-page> component gives me the error:
[Vue warn]: Failed to resolve component: journal-card at
<JournalPage>.
How do I fix this please?
Here's my top level code that loads the Vue components, 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');
and here's my journal-page.vue container
<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>
and journal-card.vue component
<template>
<div>
hi imma journal entry
</div>
</template>
<script lang="js">
export default {
'data': null,
'props': [ 'entry' ]
};
</script>
Registering components in the root component's components option doesn't make them global. It just means that they are registered locally for that root component.
To register global components, use 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 3 - “无法解析组件"具有全局组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
