Organisationsstruktur der Vue-Komponente und Details zur Komponentenregistrierung

1. Komponentenorganisation

Normalerweise ist eine Anwendung als verschachtelter Komponentenbaum organisiert:

Beispielsweise können wir Komponenten wie Kopfzeilen, Seitenleisten und Inhaltsbereiche haben, die jeweils andere Komponenten wie Navigationslinks und Blogbeiträge enthalten können.

Um in Vorlagen verwendet werden zu können, müssen diese Komponenten zunächst registriert werden, damit Vue sie erkennen kann. Es gibt zwei Arten der Komponentenregistrierung: globale Registrierung und lokale Registrierung.

Bisher sind alle unsere Komponenten global über Vue.component registriert:

Vue.component('mein-Komponentenname', {
  // ... Optionen ...
})

Global registrierte Komponenten können nach ihrer Registrierung in jeder neu erstellten Vue -Stamminstanz (über new Vue ) verwendet werden, einschließlich der Vorlagen aller untergeordneten Komponenten in ihrem Komponentenbaum.

2. Komponentenname

Wenn wir eine Komponente registrieren, müssen wir ihr immer einen Namen geben. Dies haben wir beispielsweise bei der globalen Registrierung festgestellt:

Vue.component('mein-Komponentenname', { /* ... */ })

Der Komponentenname ist der erste Parameter von Vue.component

2.1 Benennung der Komponenten

Es gibt zwei Möglichkeiten, Komponentennamen zu definieren:

• Durch Bindestrich getrennte Namen: my-component-name
• Den ersten Buchstaben des Namens groß schreiben: MyComponentName


Durch Bindestrich getrennte Namen

Vue.component('mein-Komponentenname', { /* ... */ })

Wenn Sie eine Komponente mit (durch Bindestrich getrennten Namen) definieren, zum Beispiel: <my-component-name></my-component-name>


Den ersten Buchstaben groß schreiben

Vue.component('MeinKomponentenname', { /* ... */ })

Wenn Sie eine Komponente mit (Großbuchstabe am Anfang) definieren, können Sie beim Verweisen auf das benutzerdefinierte Element beide Namenskonventionen verwenden. Das heißt, sowohl <my-component-name> als auch <MyComponentName> sind zulässig.

Hinweis: Allerdings sind nur durch Bindestriche getrennte Namen gültig, wenn sie direkt im DOM verwendet werden (d. h. keine Zeichenfolgenvorlagen).

3. Globale Registrierung

Die globale Registrierung erfolgt über die Verwendung von Vue.component zum Erstellen von Komponenten:

Java
Vue.component('mein-Komponentenname', {
  // ... Optionen...
})

Diese Komponenten sind weltweit registriert. Dies bedeutet, dass sie nach der Registrierung in der Vorlage jeder neu erstellten Vue -Stamminstanz ( new Vue ) verwendet werden können.

Zum Beispiel:

<div id="app">
  <Komponente-a></Komponente-a>
  <Komponente-b></Komponente-b>
  <Komponente-c></Komponente-c>
</div>

Vue.component('Komponente-a', { /* ... */ })
Vue.component('Komponente-b', { /* ... */ })
Vue.component('Komponente-c', { /* ... */ })

neues Vue({ el: '#app' })

Allerdings wird die globale Registrierung in tatsächlichen Projekten nicht oft verwendet.

4. Teilregistrierung

Die globale Registrierung ist oft nicht optimal. Wenn Sie beispielsweise ein Build-System wie webpack verwenden, bedeutet die globale Registrierung aller Komponenten, dass eine Komponente auch dann noch in Ihrem endgültigen Build enthalten ist, wenn Sie sie nicht mehr verwenden. Dies führt zu einer unnötigen Erhöhung der Menge an JavaScript , die Benutzer herunterladen müssen.

In diesen Fällen können Sie die Komponente über ein einfaches JavaScript Objekt definieren:

let KomponenteA = {
    Vorlage: `<p>Hallo</p>`
  }
let KomponenteB = {
  Vorlage: `<p>Welt</p>`
}

Definieren Sie dann in der components die Komponenten, die Sie verwenden möchten:

neuer Vue({
  el: '#app',
  Komponenten:
    'Komponente-a': KomponenteA,
    'Komponente-b': KomponenteB
  }
})

Für jede property im components ist der property der Name des benutzerdefinierten Elements und der property das Optionsobjekt für diese Komponente.

Natürlich verwenden wir im eigentlichen Entwicklungsprozess das Modulsystem, um weitere Komponenten zu registrieren, die später eingeführt werden.

Dies ist das Ende dieses Artikels über die Organisationsstruktur von Vue-Komponenten und die Einzelheiten der Komponentenregistrierung. Weitere relevante Inhalte zur Organisationsstruktur von Vue-Komponenten und zur Komponentenregistrierung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!