[Vue 警告]：嘗試創建全局組件時解析組件失敗

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 實例。 因此，如果您需要添加全局組件，則需要將其添加到從createApp創建的app object 中，代碼如下：

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

問題

但請注意這里有一個錯誤。 它是什么？ 您使用createApp創建了另一個app 。 正如我之前提到的，如果你需要創建一個全局組件，你只能在同一個實例上創建。

使固定

我們知道這里的問題是我們正在創建另一個實例，它又是一個新的獨立實例，所以我們需要弄清楚我們可以在globalComponents.ts中擁有相同的app實例的方法，所以我們將傳遞app從main-ts到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"));
}

現在您可以在main.ts中調用registerComponents為：

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