So referenzieren Sie gekapselte Komponenten in Vue

Mit der kontinuierlichen Weiterentwicklung von Front-End-Frameworks beginnen immer mehr Entwickler, Vue.js zum Erstellen von Webanwendungen zu verwenden. In Vue.js sind Komponenten eines der Kernkonzepte für die Erstellung von Webanwendungen. Vue.js-Komponenten machen Code modularer, wiederverwendbarer, einfacher zu warten und einfacher zu testen. Das Kapseln von Komponenten ist eine der wichtigen Funktionen von Vue.js. Es kann wiederverwendbaren Code und Status in ein separates Modul kapseln, das als Komponente bezeichnet wird, sodass er in verschiedenen Teilen des Programms wiederverwendet werden kann. In diesem Artikel wird erläutert, wie Sie auf gekapselte Komponenten verweisen.

1. Komponente erstellen

Zuerst müssen wir die Vue-Komponente erstellen. Bevor wir eine Komponente erstellen, müssen wir den Namen, die Eigenschaften, die Methoden usw. der Komponente festlegen. In diesem Artikel nehmen wir eine einfache Schaltflächenkomponente als Beispiel, um zu demonstrieren, wie gekapselte Komponenten referenziert werden. Diese Schaltflächenkomponente verfügt über zwei Eigenschaften: btnClass und btnText. btnClass wird verwendet, um den Klassennamen der Schaltfläche anzugeben, und btnText wird verwendet, um den Textinhalt der Schaltfläche anzugeben. Hier ist der Beispielcode für die Schaltflächenkomponente:

<template>
  <button :class="btnClass">{{ btnText }}</button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    btnClass: {
      type: String,
      default: '',
    },
    btnText: {
      type: String,
      default: '',
    },
  },
};
</script>

2. Registrieren Sie die Komponente als globale Komponente

Um die Komponente an einer beliebigen Stelle in der Anwendung zu verwenden , wir Die Komponente muss als globale Komponente registriert werden. Auf diese Weise kann die Komponente überall referenziert werden. In Dateien, die Komponenten verwenden müssen, verwenden Sie einfach den Komponentennamen in der Vorlage. Um eine Komponente als globale Komponente zu registrieren, verwenden Sie einfach die Methode Vue.component(). Das Folgende ist ein Beispielcode:

import Vue from 'vue';
import MyButton from './components/MyButton.vue';

Vue.component('MyButton', MyButton);

Bei der Registrierung einer Komponente müssen wir den Namen der Komponente und den Pfad zur Komponentendatei angeben.

3. Registrieren Sie eine Komponente als lokale Komponente

Im Gegensatz zu globalen Komponenten können lokale Komponenten nur am registrierten Standort und seinen Unterkomponenten verwendet werden. Dieser Ansatz eignet sich, wenn Sie dieselbe Komponente in mehreren untergeordneten Komponenten mit derselben übergeordneten Komponente verwenden müssen. Im folgenden Beispielcode registrieren wir die Komponente als lokale Komponente:

<template>
  <div>
    <MyButton btnClass="primary" btnText="Click me"></MyButton>
  </div>
</template>

<script>
import MyButton from './MyButton.vue';

export default {
  name: 'MyView',
  components: { MyButton },
};
</script>

Bei der Registrierung einer lokalen Komponente müssen Sie die Komponente in der Komponentenoption der Komponente deklarieren, in der die Komponente registriert ist.

4. Einführung externer Komponenten

Wir platzieren die Komponentendateien im Komponentenverzeichnis und dann in den Dateien, die die Komponenten verwenden müssen (z. B als App.vue) Komponenten in . einführen. Wenn wir diese Komponente verwenden müssen, verwenden wir sie einfach in der Vorlage. Wie unten gezeigt:

import MyButton from './components/MyButton.vue';

export default {
  name: 'App',
  components: {
    MyButton,
  },
};

Natürlich gibt es auch andere Möglichkeiten, auf Komponenten zu verweisen, z. B. die Funktion import() zum dynamischen Laden von Komponenten oder die Methode Vue.component() zum Hinzufügen von Komponenten. usw. Wählen Sie je nach tatsächlicher Situation die am besten geeignete Methode.

Zusammenfassung

Vue.js ist ein leistungsstarkes Front-End-Framework und sein Komponentensystem ist eines der Kernkonzepte für die Erstellung von Webanwendungen. Die gekapselten Komponenten von Vue.js können Code modularer, wiederverwendbarer und einfacher zu warten und zu testen machen. Um auf eine Komponente in einer Anwendung zu verweisen, müssen wir einen Namen für die Komponente registrieren und ihn dann in die Datei einfügen, in der die Komponente verwendet werden soll. Machen Sie unseren Code modularer und wiederverwendbar und reduzieren Sie so die Coderedundanz. Ich hoffe, dieser Artikel war hilfreich und hat Sie mit der Verwendung von Vue.js-Komponenten vertrauter gemacht.

Das obige ist der detaillierte Inhalt vonSo referenzieren Sie gekapselte Komponenten in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!