Vue 3 - 使用全局组件“无法解析组件”

Question

我的 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 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>

Answer 1

在根组件的

components

选项中注册组件不会使它们成为全局组件。这样做只会使它们可供根组件本身使用，而不是其子组件。

要全局注册组件，请在顶级代码中使用

app.component

：

main.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');

Answer 2

另外，由于在搜索引擎中查找“Vue 3 无法解析组件”的一些问题时会显示此页面，因此 Vue 3 / Quasar 2 已弃用了一些内容：

例如。 q-侧链接默默地消失了（这里是上一个文档）

根据此评论：

QSideLink——不再需要！只需使用 QItem 或其他东西您想要的组件并将 @click="$router.push(...)" 绑定到它。

抱歉，如果它不完全符合主题，但它会咬伤其他人，所以我更愿意帮助一个人发表此评论;-)

Answer 3

在我的场景中，问题是不同的。我试图在 laravel Blade 文件中渲染类似的多字 Vue 组件。

如果您在非 .Vue 文件（例如 HTML / Laravel Blade 等）中引用 Vue 组件，则应使用短横线格式来引用组件名称。喜欢

my-global-component

Vue 文档 - https://vuejs.org/guide/essentials/component-basics.html#dom-template-parsing-caveats

Answer 4

对我来说，它是在数组中声明组件：

components: [ActiveUser, UserData]

本应位于对象中：

components: {ActiveUser, UserData}

Answer 5

确保安装代码最后出现

app.mount('#app')    
app.component('list-view', ListView2)

是错误的并且不会起作用但是

app.component('list-view', ListView2)
app.mount('#app')

是正确的。

Vue 3 - 使用全局组件“无法解析组件”

问题描述投票：0回答：5

5个回答

最新问题

Vue 3 - 使用全局组件“无法解析组件”

问题描述 投票：0回答：5

5个回答

最新问题

问题描述投票：0回答：5