当我在顶级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>