So importieren Sie Vue-Komponenten automatisch bei Bedarf

In Vue können wir Komponenten über globale Komponenten und lokale Registrierung verwenden

Globale Registrierung

Erstellen globaler Komponenten über app.component

importiere { createApp } von 'vue'
importiere HelloWorld aus './components/HelloWorld'

const app = createApp({})

//Eine Komponente mit dem Namen „Hello-Wolrd“ global registrieren. app.component('hello-wolrd', HelloWorld);

Sobald wir die Komponente global registriert haben, können wir sie überall verwenden: <hello-world/>

Es ist erwähnenswert, dass Vue durch die globale Registrierung die TypeScript-Unterstützung verliert. Vue 3 verfügt über einen PR, der die Schnittstelle globaler Komponenten erweitert. Derzeit unterstützt Volar diese Verwendung bereits. Wir können TypeScript-Unterstützung für alle Spielkomponenten hinzufügen, indem wir dem Stammverzeichnis eine Datei components.d.ts hinzufügen.

Deklariere das Modul 'vue' {
  Schnittstelle GlobalComponents exportieren {
    Hallo Welt: Importtyp('./src/components/HelloWorld.vue')['Standard']
  }
}

Teilregistrierung

Wir können die Vue-Komponente direkt aus der Datei importieren.

In einer einzelnen Dateikomponente (SFC)

<Vorlage>
  <HelloWorld msg="Willkommen bei Ihrer Vue.js-App"/>
</Vorlage>

<Skript>
importiere HelloWorld aus './components/HelloWorld.vue'

Standard exportieren {
  Name: "App",
  Komponenten:
    Hallo Welt
  }
}
</Skript>

In JSX

importiere HelloWorld aus './components/HelloWorld.vue'
Standard exportieren {
  Name: "Artikel",
  machen(){
    zurückkehren (
      <HelloWorld msg="Willkommen bei Ihrer Vue.js-App"/>
    )
  }
}

Auf lokal registrierte Komponenten kann in anderen Komponenten nicht zugegriffen werden und sie sind in ihren übergeordneten oder untergeordneten Komponenten nicht verfügbar. Daher müssen Sie die Komponente an jeder Stelle, an der sie verwendet wird, erneut einführen und registrieren.

importiere HelloWorld aus './components/HelloWorld.vue'

Diese Art des direkten Importierens von Komponenten hat jedoch noch einen weiteren Vorteil. Wenn die importierte Komponente Typescript verwendet, können wir ohne Plugins intelligente Eingabeaufforderungen und Typprüfungsfunktionen in der Komponente erhalten.

Lokale automatische Registrierung

Es ist ersichtlich, dass die Vorteile der lokalen Registrierung offensichtlich sind, wir müssen sie jedoch bei jeder Verwendung wiederholt importieren. Wenn Sie jedoch viele Komponenten haben, kann Ihr Komponentenregistrierungscode langwierig aussehen. Wir können unplugin-vue-components verwenden, um Komponenten bei Bedarf automatisch zu importieren. Dadurch werden Komponenten bei Bedarf importiert, aber es besteht keine Notwendigkeit, Komponenten zu importieren und zu registrieren.

Dieses Plugin generiert automatisch eine components.d.ts für die verwendeten Komponenten, um TypeScript-Unterstützung zu erhalten.

Installieren Sie das Plugin

vite

// vite.config.ts
Komponenten aus „unplugin-vue-components/vite“ importieren

exportiere Standard-DefineConfig({
  Plugins: [
    Komponenten({ /* Optionen */ }),
  ],
})

Aufrollen

// rollup.config.js
Komponenten aus „unplugin-vue-components/rollup“ importieren

Standard exportieren {
  Plugins: [
    Komponenten({ /* Optionen */ }),
  ],
}

Webpack

// webpack.config.js
modul.exporte = {
  /* … */
  Plugins: [
    erfordern('unplugin-vue-components/webpack')({ /* Optionen */ })
  ]
}

Anschließend können wir die Komponente wie gewohnt in unserem Template verwenden und sie führt automatisch folgende Transformation durch

<Vorlage>
  <div>
    <HalloWelt msg="Hallo Vue 3.0 + Vite" />
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Name: "App"
}
</Skript>

Konvertieren in

<Vorlage>
  <div>
    <HalloWelt msg="Hallo Vue 3.0 + Vite" />
  </div>
</Vorlage>

<Skript>
importiere HelloWorld aus './src/components/HelloWorld.vue'

Standard exportieren {
  Name: "App",
  Komponenten:
    Hallo Welt
  }
}
</Skript>

Standardmäßig wird im Verzeichnis src/components nach Komponenten gesucht. Wir können das Komponentenverzeichnis über den Parameter dirs anpassen. Weitere Konfigurationen finden Sie unter github.com/antfu/unplu…

Vergleich verschiedener Lösungen

Informationen zu Komponentennamen

Es gibt zwei Möglichkeiten, Komponentennamen zu definieren:

Verwendung von Kebab-Case:

Vue.component('mein-Komponentenname', { /* ... */ })
Wenn Sie eine Komponente mit Kebab-Case (durch Bindestriche getrennte Namen) definieren,
Sie müssen auch Kebab-Case verwenden, wenn Sie auf das benutzerdefinierte Element verweisen, zum Beispiel <my-component-name> .

Verwenden Sie PascalCase

Vue.component('MeinKomponentenname', { /* ... */ })
Wenn Sie eine Komponente in PascalCase definieren,
Sie können beim Verweisen auf das benutzerdefinierte Element beide Nomenklaturen verwenden.
Dies bedeutet, dass sowohl <my-component-name> als auch <MyComponentName> akzeptabel sind.
Beachten Sie jedoch, dass nur „Kebab-Case“ gültig ist, wenn es direkt im DOM verwendet wird (d. h. bei Vorlagen, die keine Zeichenfolgen sind).

Daher empfehlen wir grundsätzlich, dass Komponenten die Kebab-Case-Benennungsmethode verwenden.

siehe

v3.cn.vuejs.org/guide/comp…

v3.cn.vuejs.org/guide/types…

github.com/antfu/unplu…

Zusammenfassen

Dies ist das Ende dieses Artikels zum automatischen Einführen von Vue-Komponenten bei Bedarf. Weitere Informationen zum automatischen Einführen von Vue-Komponenten bei Bedarf finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!