Vue.js Vue 3 带有全局组件的无法解析组件

发布于02月03日

我的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-page>组件中使用<journal-card>组件会产生错误:

[Vue warn]:在<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>

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.js Vue 3 带有全局组件的无法解析组件

推荐答案

Vue.js相关问答推荐

正在try 访问vutify中v-select(ItemProps)的嵌套json值

如何使用composition api v-model Select 框获取其他JSON 值？

在 Nuxt3 中使用 Vue3 vue-ganntastic 插件

Nuxt3 / Vue3 - 当属性更改时如何动态更改渲染组件？

Vue 3 在一个值更改问题后再次重新渲染每一行

vue 不重新渲染数据更改

我在表格中创建了一个包含信息的新行，但在 Cypress e2e 测试中我无法获得最后一行(新行)

Vue 脚本标签中更漂亮的 destruct 功能

Vue cli 3项目，图像路径中的动态src不起作用

如何为 Vue 应用提供 robots.txt

如何修复跨域读取阻塞 (CORB) 阻止了 MIME 类型应用程序/json 的跨域响应问题？

使用 Vee-Validate 在提交时验证子输入组件

Axios-一次发出多个请求(vue.js)

使用 Vue.js 的用户可切换自定义主题

NUXT如何将数据从页面传递到布局

如何从 keep-alive 中销毁缓存的 Vue 组件？

如何从方法内部访问数据

无法访问手表处理程序 vuejs 中的数据变量

如何在布局中使用组件？

如何修复套接字 io 中的 400 错误错误请求？