Ric*_*ard 2 javascript vue.js vue-component vue-cli vuejs3
我的 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-card>组件内部使用<journal-page>组件会给我带来错误：
[Vue 警告]：无法解析组件：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>
在根组件的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');