Javascript [Vue warn]：尝试创建全局组件时解析组件失败

我对Vue Typescript有新的了解。我尝试创建全局组件，但收到警告，组件未加载到模板上。这就是我试图创建全局组件的方式

App.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")

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

globalComponents.ts

import { createApp } from "vue"

const app = createApp({})

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

Input.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")

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

.ui输入
输入（v-model=“$attrs”v-on=“$listeners”）
从“vue”导入{defineComponent}
导出默认定义组件({
继承属性：false
})

---

希望你们都能帮助我，提前谢谢

从Vue 3开始，如果您使用

createApp

创建一个应用程序，它将是一个独立的Vue应用程序实例。因此，如果需要添加全局组件，则需要将其添加到从

createApp

创建的

app

对象上，以下是代码：

const app = createApp({});

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

app.mount("#app");

问题 但请注意这里有一个错误。这是怎么一回事？您使用

createApp

创建了另一个

app

。如前所述，如果需要创建全局组件，则只能在同一实例上创建

修理 正如我们所知，这里的问题是我们正在创建另一个实例，它又是一个新的独立实例，因此我们需要找出在

globalComponents.ts

中使用相同的

app

实例的方法，因此我们将

app

从

main ts

传递到

globalComponents.ts

，比如：

globalComponents.ts 现在您可以在

main.ts

中调用

registerComponents

，如下所示：

梅因酒店

---

你好@U-Dev谢谢你的回答，但很抱歉还是没用，我按照你的方式。。我仍然收到这个警告

[Vue warn]：无效的VNode类型：未定义（未定义）

@bkndvlpr更新了答案，现在检查。哇，非常感谢@U-dev！这些都是做这件事的好方法和正确方法@bkndvlpr很高兴它起到了作用：）我认为您正在从vue 2迁移到vue 3。假设我建议您阅读vue 3迁移指南。这将对您有很大帮助，并有助于更好地理解vue 3。这是我的建议

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

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

app.mount("#app");

import { defineAsyncComponent } from "vue";

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