javascript Vue 3 -“无法解析组件”(具有全局组件)

ylamdve6 于 2023-01-29 发布在 Java

关注(0)|答案(3)|浏览(448)

我的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警告]：无法解析组件：<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>

JavaScript

来源：https://stackoverflow.com/questions/66024797/vue-3-failed-to-resolve-component-with-global-components

3条答案

按热度按时间

oxcyiej71#

在根组件的components选项中注册组件并不能使它们成为全局组件，这样做只是使它们对根组件本身可用，而不是其子组件。
要全局注册组件，请在顶级代码中使用app.component：

主文件. 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');

赞(0）回复(0）举报 2023-01-29

8qgya5xd2#

在我的场景中问题是不同的。我试图在一个laravel刀片文件中呈现一个类似的多字Vue组件。
如果你在非.Vue文件中引用一个Vue组件（比如HTML / Laravel Blade等），你应该使用kebab大小写格式来引用组件名。
Vue文档-https://vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats

赞(0）回复(0）举报 2023-01-29

des4xlb03#

另外，作为一个旁注，因为当在搜索引擎中查找"Vue 3无法解析组件"的一些问题时，会显示此页面，所以有一些东西在Vue 3/Quasar 2中被弃用：
例如，q侧链路静默消失（previous doc here）
根据comment：
QSideLink--不再需要了!只需使用一个QItem或者任何你想要的组件，然后绑定一个@click ="$router. push（...）"到它上面。
抱歉，如果这不是完全在主题上，但它会咬一些其他人，所以我宁愿帮助一个人与此评论;-）

赞(0）回复(0）举报 2023-01-29

我来回答

javascript Vue 3 -“无法解析组件”(具有全局组件)

3条答案

相关问题

热门标签

最新问答