[Vue warn]：尝试创建全局组件时无法解析组件

Question

我是 Vue Typescript 的新手。我尝试创建全局组件，但收到警告并且组件未加载到模板上。这就是我尝试创建全局组件的方式

应用程序.vue

import { createApp } from "vue"
import App from "./App.vue"
import "./registerServiceWorker"
import "./globalComponents"
import router from "./router"
import store from "./store"

createApp(App)
  .use(store)
  .use(router)
  .mount("#app")

全局组件.ts

import { createApp } from "vue"

const app = createApp({})

// Forms
app.component("ui-input", () => import("@/components/core/ui/Input.vue"))

输入.vue

<template lang="pug">
.ui-input
  input(v-model="$attrs" v-on="$listeners")
</template>

<script lang="ts">
import { defineComponent } from "vue"

export default defineComponent({
  inheritAttrs: false
})
</script>

希望大家能够帮助我，先谢谢了

Answer 1

从 Vue 3 开始，如果您使用 创建应用程序createApp，它将是一个独立的 Vue App 实例。因此，如果您需要添加全局组件，那么您需要将其添加到app从 创建的对象上createApp，以下是代码：

const app = createApp({});

app.component('my-component-name', MyComponent) // <-- here you can register.

app.mount("#app");

但是如果有很多组件那么将它们添加到main.ts文件中将会很混乱，所以我们可以像您一样创建另一个文件，所以：

您当前的globalComponents.ts

import { createApp } from "vue"

const app = createApp({})

// Forms
app.component("ui-input", () => import("@/components/core/ui/Input.vue"))

问题

但请注意这里有一个错误。它是什么？app您使用创建了另一个createApp。正如我之前提到的，如果您需要创建全局组件，则只能在同一个实例上创建。

使固定

正如我们所知，这里的问题是我们正在创建另一个实例，这又是一个新的独立实例，因此我们需要弄清楚如何也可以拥有相同的app实例globalComponents.ts，因此我们将传递appfrom main-tsto globalComponents.ts，例如：

全局组件.ts

import { App } from "vue";

// register components
export const registerComponents = (app: App): void => {
    app.component("ui-input", () => import("@/components/core/ui/Input.vue"));
}

现在您可以registerComponents通过main.ts以下方式调用：

主要.ts

const app = createApp(App)
    .use(store)
    .use(router);

registerComponents(app); // <-- here you go

app.mount("#app");

你仍然会得到类似的东西：

[Vue 警告]：无效的 VNode 类型：未定义（未定义）。

您可以在此处阅读有关如何在 vue 3 中定义异步组件的更多信息。要修复该错误，您需要将您的import内容包装defineAsyncComponent为：

全局组件.ts

import { defineAsyncComponent } from "vue";

// register components
export const registerComponents = (app) => {
  app.component(
    "ui-input",
    defineAsyncComponent(() => import("@/components/Input.vue"))
  );
};