Detaillierte Analyse der untergeordneten und übergeordneten Vue-Komponenten

1. Übergeordnete Komponenten und untergeordnete Komponenten

Wir können oft nicht sagen, was eine übergeordnete und was eine untergeordnete Komponente ist. Fassen wir es nun kurz zusammen: Wir kapseln einen Codeabschnitt in eine Komponente ein, und diese Komponente wird in eine andere Komponente eingeführt. Die Datei, die die gekapselte Komponente einführt, wird als übergeordnete Komponente bezeichnet, und die eingeführte Komponente wird als untergeordnete Komponente bezeichnet.

Der spezifische Code lautet wie folgt:

<div id="app">
  <Komponente2></Komponente2>
</div>
<Skript>
  // Globale Registrierung Vue.component("component1", {
    Vorlage: `
    <div>
      <h2>Hallo</h2>
    </div>
    `
  })

  const app = new Vue({
    el: "#app",
    Daten: {
      Nachricht: "Hallo"
    },
    Komponenten:
      // Lokale Registrierung "component2": {
        Vorlage: `
            <div>
              <Komponente1></Komponente1>
              <h2>Welt</h2>
            </div>
        `,
      }
    }
  })
</Skript>

• 1. Komponente component1 global registrieren
• 2. Registrieren Sie die Komponente component2 lokal, und die Komponente component1 wird in component2 referenziert.

Schließlich verwenden wir Komponente component-2 in HTML.

Der Vorlagencode lautet:

<div>
  <Komponente-1></Komponente-1>
  <h2>Welt</h2>
</div>

Da Komponente component1 auch eine Vorlage hat, analysiert das Programm diese automatisch und der endgültige html Code von component-2 lautet

<div>
  <div>
      <h2>Hallo</h2>
    </div>
  <h2>Welt</h2>
</div>

Die im Browser sichtbaren Auswirkungen sollten also sein:

Hallo
Welt

Ergebnis:

component1 ist die untergeordnete Komponente, component2 ist die übergeordnete Komponente

2. Vorlage Trennung Schreiben

Als wir die Komponente oben erstellt haben, haben wir die template in die Komponente geschrieben. Als wir sie jedoch im Compiler geschrieben haben, gab es nicht nur keine Code-Eingabeaufforderung, sondern auch die Zeilenumbrüche waren nicht ausgerichtet, was das Schreiben sehr mühsam machte. Daher stellen wir hier die Schreibmethode mit Vorlagentrennung vor.

1. Vorlagen-Tag

Wir extrahieren die ursprünglich in der Komponente geschriebene template , fügen sie in html ein, verwenden template und fügen ihr wie folgt ein ID-Attribut hinzu:

<Vorlagen-ID="Komponente2">
  <div>
    <Komponente1></Komponente1>
    <h2>Welt</h2>
  </div>
</Vorlage>

Ersetzen Sie dann in der Komponente den Inhalt des ursprünglichen template Tags durch die ID, damit das Programm automatisch die entsprechende ID-Vorlage findet:

Komponenten:
  // Lokale Registrierung "component2": {
    Vorlage: `#Komponente2`,
  }
}

Empfehlen Sie diese Schreibmethode

2. Text/X-Vorlage

Wir haben eine andere Schreibweise, die der obigen ähnlich ist. Wir haben oben das template -Tag verwendet. Bei dieser Schreibweise muss nur der Inhalt template in das script Tag eingefügt, ihm der Typ type=text/x-template zugewiesen und ihm dann ein ID-Attribut zugewiesen werden.

wie folgt:

<script Typ="text/x-template" id="Komponente2">
  <div>
    <Komponente1></Komponente1>
    <h2>Welt</h2>
  </div>
</Skript>
 

3. Kommunikation zwischen Eltern- und Kindkomponenten - Eltern-Kind

Wenn wir eine übergeordnete Komponente und eine untergeordnete Komponente erstellen und die untergeordnete Komponente auch dieselben Daten der übergeordneten Komponente abrufen möchte, besteht eine Möglichkeit darin, die Schnittstelle zum Abrufen der Daten in den Hintergrund zu senden. Dies belastet jedoch den Server. Daher haben wir eine zweite Methode, bei der die Daten der übergeordneten Komponente über props -Attribut abgerufen werden.

<div id="app">
  <test1 :cmovies="Filme"></test1>
</div>
<Vorlagen-ID="test1">
  <div>
    <ul>
      <li v-for="Artikel in cmovies">{{Artikel}}</li>
    </ul>
  </div>
</Vorlage>
<Skript>
  const app = new Vue({
    el: "#app",
    Daten: {
      Filme: ["One Piece", "Haier Brothers", "Sea King"]
    },
    Komponenten:
      "test1": {
        Vorlage: `#test1`,
        Requisiten: ['cmovies'],
        Daten(){
          zurückkehren{}
        },
      }
    }
  })
</Skript>

Hier definieren wir app Instanz als übergeordnete Komponente und die untergeordnete Komponente test1 . Wenn die untergeordnete Komponente test1 die Daten in der übergeordneten Komponente data abrufen möchte, um sie auf der Seite anzuzeigen, muss sie das Attribut props schreiben. Hier wird die Variable cmovies gebunden. Schließlich müssen wir, wenn wir die untergeordnete Komponente test1 in HTML verwenden und die Daten in der übergeordneten Komponente data übergeben möchten, das Attribut binden ，:cmovies="movies"，cmovies ist die in props definierte Variable und der gebundene Wert ist die Filmliste. Daher ist der Wert von <li v-for="item in cmovies">{{item}}</li>中的cmoviess tatsächlich die Daten der Liste movies , da die übergeordnete Komponente den Wert an die untergeordnete Komponente übergeben hat.

Schließlich können die Filme in Filmen auf der Webseite angezeigt werden.

In der ungeordneten Liste auf der obigen Seite verwenden wir untergeordnete Komponenten. Die Daten werden von der übergeordneten data an die untergeordnete Komponente übergeben, und die untergeordnete Komponente wird über props

1. Prop-Typ

Im obigen Beispiel definieren wir props als Array, um Daten von der übergeordneten Komponente zu empfangen. Wir können stattdessen auch Objekte verwenden, die die Konfiguration erweiterter Optionen wie Typerkennung, benutzerdefinierte Validierung und das Festlegen von Standardwerten ermöglichen.

• Typ: kann einer der folgenden nativen Konstruktoren sein: String、Number、Boolean、Array、Object、Date、Function、Symbol , ein beliebiger benutzerdefinierter Konstruktor oder ein Array der oben genannten. Überprüft, ob eine prop vom angegebenen Typ ist, und gibt andernfalls eine Warnung aus. Weitere Informationen zu Prop -Typen finden Sie hier.
• default: any gibt einen Standardwert für prop an. Wenn diese prop nicht übergeben wird, wird stattdessen dieser Wert verwendet. Objekt- oder Array-Standardwerte müssen von einer Factory-Funktion zurückgegeben werden.
• erforderlich: Boolean definiert, ob die prop erforderlich ist. Wenn in Nicht-Produktionsumgebungen der Wert truthy ist und die prop nicht übergeben wird, wird eine Konsolenwarnung ausgegeben.
• Validator: Function benutzerdefinierte Validierungsfunktion ersetzt den Wert der prop als einzigen Parameter. Wenn diese Funktion in Nicht-Produktionsumgebungen einen falschen Wert zurückgibt (d. h. die Validierung fehlschlägt), wird eine Konsolenwarnung ausgegeben. Weitere Informationen zur prop -Validierung finden Sie hier.
  

Beispiel:

// Einfache Syntax Vue.component('props-demo-simple', {
  Requisiten: ['Größe', 'meineNachricht']
})

// Objektsyntax, die Validierung bereitstellt Vue.component('props-demo-advanced', {
  Requisiten: {
    // Erkennungstyp Höhe: Zahl,
    // Erkennungstyp + anderes Überprüfungsalter: {
      Typ: Nummer,
      Standard: 0,
      erforderlich: wahr,
      Validator: Funktion (Wert) {
        Rückgabewert >= 0
      }
    }
  }
})

Hinweis: Wenn wir props verwenden, CamelCase verwenden, z. B. cMovies , und es dann in HTML einbinden, erkennt das Programm es nicht, wenn wir es so schreiben. Wir müssen es in c-movies

4. Kommunikation zwischen Eltern- und Kindkomponenten

Im Child-to-Parent-Szenario übergibt die Child-Komponente das Ereignis normalerweise an die Parent-Komponente, damit diese darauf lauscht und der Parent-Komponente mitteilt, auf welche Schaltfläche der Benutzer geklickt hat. Die verwendete Funktion ist $emit.

1. vm.$emit( ​​​​eventName, […args] )

Parameter:

• eventName: Ereignisname
• args: ein Array unbestimmter Länge

Löst ein Ereignis auf der aktuellen Instanz aus. Alle zusätzlichen Parameter werden an den Listener-Callback übergeben.

Beispiel:

<div id="app">
  <test1 @item-click="cpnClick"></test1>
</div>
<Vorlagen-ID="test1">
  <div>
    <button v-for="Artikel in Kategorien" @click="btnClick(Artikel)">{{Artikel.name}}</button>
  </div>
</Vorlage>
<Skript>
  const app = new Vue({
    el: "#app",
    Daten: {
      Nachricht: "Hallo"
    },
    Methoden: {
      cpnClick(Artikel){
        console.log("Erfolg", Element)
      }
    },
    Komponenten:
      // Lokale Registrierungskomponente test1
      "test1": {
        Daten(){
          zurückkehren {
            Kategorien: [
              {id: "aaa", name: "Heiße Empfehlung"},
              {id: "bbb", name: "Mobile Digital"},
              {id: "ccc", name: "Haushaltsgeräte"},
              {id: "ddd", name: "Lebensmittel und Getränke"},
            ]
          }
        },
        Methoden: {
          btnClick(Artikel){
            dies.$emit("Artikel-Klick", Artikel)
          }
        },
        Vorlage: `#test1`
      }
    }
  })
</Skript>

Der obige Code definiert test1 und übergibt das Ereignis und den zusätzlichen Parameter item über $ emit in methods . Anschließend bindet die übergeordnete Komponente das Ereignis über @item-click="cpnClick" , sodass die übergeordnete Komponente das Klickereignis der untergeordneten Komponente empfangen und ihr eigenes Klickereignis auslösen kann. Die Wirkung ist wie folgt

Wir können sehen, dass die von der Konsole gedruckten Protokolle die categories der Unterkomponenten enthalten.

5. Kommunikation zwischen Eltern- und Kindkomponenten - kombiniert mit bidirektionaler Bindung

Das folgende Beispiel kombiniert Parent-to-Child und Child-to-Parent sowie v-model und ist somit ein sehr umfassendes Beispiel.

1. Grundlegender Vorlagencode

<div id="app">
  <cpn :Nummer1="Anzahl1" :Nummer2="Anzahl2"></cpn>
</div>
<Vorlagen-ID="cpn">
  <div>
    <h2>{{Nummer1}}</h2>
    <h2>{{Nummer2}}</h2>
  </div>
</Vorlage>
<Skript>
  const app = new Vue({
    el: "#app",
    Daten: {
      Zahl1: 0,
      Zahl2: 1,
    },
    Komponenten:
      // Unterkomponente cpn definieren
      "cpn": {
        Vorlage: `#cpn`,
        Requisiten: {
          Nummer1: Nummer,
          Nummer2: Nummer,
        }
      }
    },
  })
</Skript>

Der Code macht Folgendes

• 1. Definieren Sie die untergeordnete Komponente cpn und definieren Sie zwei Attribute number1 und number2 , um die von der übergeordneten Komponente übergebenen Daten zu empfangen.
• 2. Die Unterkomponente cpn wird im html Code referenziert und num1 und num2 in der App-Stärke werden an die Eigenschaften in der Unterkomponente props übergeben
• 3. Schließlich sind die Daten number1 und Nummer2, die wir auf der Seite anzeigen, tatsächlich Nummer1 und Nummer2 in den Daten

Der endgültige Seitenanzeigeeffekt ist:

0
1

2. Bidirektionale Bindung hinzufügen

Basierend auf der obigen Vorlage fügen wir eine bidirektionale Bindung hinzu, fügen 2 input -Tags hinzu und verwenden v-model zum Binden mit den Attributen in props

<Vorlagen-ID="cpn">
  <div>
    <h2>Requisiten:{{number1}}</h2>
    <Eingabetyp="Text" v-Modell="Nummer1">
    <h2>Requisiten:{{number2}}</h2>
    <Eingabetyp="Text" v-Modell="Nummer2">
  </div>
</Vorlage>

Der obige Code vervollständigt die bidirektionale Bindung, es wird jedoch eine Fehlerwarnung angezeigt

Wenn wir bidirektionale Bindung mit props in einer untergeordneten Komponente verwenden, wird eine Warnung angezeigt, die besagt, dass keine bidirektionale Bindung props verwendet werden darf. Es wird empfohlen, für bidirektionale Bindung data oder compused Daten zu verwenden. Hier ändern wir es in data .

<Vorlagen-ID="cpn">
  <div>
    <h2>Daten:{{dnumber1}}</h2>
    <Eingabetyp="Text" v-Modell="dnumber1">
    <h2>Daten:{{dnumber2}}</h2>
    <Eingabetyp="Text" v-Modell="dnumber2">
  </div>
</Vorlage>
Daten(){
   zurückkehren {
     dnumber1: diese.number1,
     dnumber2: diese.number2,
   }
},

Beim Binden an data tritt kein Fehler auf.

3. Umgekehrte Bindung

Wenn wir der obigen Idee folgen, hoffen wir, dass sich beim Ändern input Eingabewerts auch die Werte von num1 und num2 in der übergeordneten Komponente in data ändern. Zu diesem Zeitpunkt ist eine umgekehrte Bindung erforderlich, um den Wert vom untergeordneten Element an das übergeordnete Element weiterzugeben.

Hier ist der vollständige Code:

<div id="app">
  <cpn :Nummer1="Anzahl1" :Nummer2="Anzahl2" @Anzahl1Änderung="Anzahl1Änderung" @Anzahl2Änderung="Anzahl2Änderung"></cpn>
</div>
<Vorlagen-ID="cpn">
  <div>
    <h2>Requisiten:{{number1}}</h2>
    <h2>Daten:{{dnumber1}}</h2>
    <Bezeichnung>
      <Eingabetyp="Text" :Wert="dNummer1" @Eingabe="Nummer1Eingabe">
    </Bezeichnung>
    <h2>Requisiten:{{number2}}</h2>
    <h2>Daten:{{dnumber2}}</h2>
    <Bezeichnung>
      <Eingabetyp="Text" :Wert="dNummer2" @Eingabe="Nummer2Eingabe">
    </Bezeichnung>
  </div>
</Vorlage>
<Skript>
  const app = new Vue({
    el: "#app",
    Daten: {
      Zahl1: 0,
      Zahl2: 1,
    },
    Methoden: {
      num1change(Wert){
        this.num1 = parseInt(Wert)
      },
      num2change(Wert){
        this.num2 = parseInt(Wert)
      },
    },
    Komponenten:
      // Unterkomponente cpn definieren
      "cpn": {
        Vorlage: `#cpn`,
        Requisiten: {
          Nummer1: Nummer,
          Nummer2: Nummer,
        },
        Daten(){
          zurückkehren {
            dnumber1: diese.number1,
            dnumber2: diese.number2,
          }
        },
        Methoden: {
          num1Input(Ereignis){
            // 1. Weisen Sie den Wert in der Eingabe dnumber zu this.dnumber1 = event.target.value
            // 2. Damit die übergeordnete Komponente den Wert ändern kann, muss ein Ereignis ausgegeben werden: this.$emit("num1change", this.dnumber1)
          },
          num2Input(Ereignis){
            // 1. Weisen Sie den Wert in der Eingabe dnumber zu this.dnumber2 = event.target.value
            // 2. Damit die übergeordnete Komponente den Wert ändern kann, muss ein Ereignis ausgegeben werden: this.$emit("num2change", this.dnumber2)
          }
        }
      }
    },
  })
</Skript>

Die Wirkung ist wie folgt:

6. Komponentenzugriff übergeordneter Zugriff untergeordneter Zugriff

Wenn wir die Funktion oder den Attributwert der untergeordneten Komponente in der übergeordneten Komponente verwenden müssen, können wir $refs verwenden, das Object zurückgibt. Sehen wir uns zunächst den folgenden Code an.

<div id="app">
  <cpn ref="aaa"></cpn>
  <button @click="btnClick">Schaltfläche</button>
</div>
<Vorlagen-ID="cpn">
  <div>
    Ich bin eine untergeordnete Komponente</div>
</Vorlage>
<script src="../js/vue.js"></script>
<Skript>
  const app = new Vue({
    el: "#app",
    Daten: {
      Nachricht: "Hallo"
    },
    Methoden: {
      btnClick(){
        Konsole.log(dies.$refs.aaa.name)
        dies.$refs.aaa.showMessage()
      }
    },
    Komponenten:
      "cpn": {
        Vorlage: `#cpn`,
        Daten(){
          zurückkehren {
            Name: „Ich bin der Name der Unterkomponente“
          }
        },
        Methoden: {
          Nachricht anzeigen(){
            console.log("Nachricht anzeigen")
          }
        }
      }
    }
  })
</Skript>

Der obige Code bewirkt Folgendes:

• 1. Komponente cpn erstellt, die eine Methode showMessage und ein Attribut name definiert
• 2. Die untergeordnete Komponente cpn wird in der übergeordneten Komponente verwendet und ein Attribut- ref Wert von aaa wird gebunden, was einer eindeutigen Kennung entspricht
• 3. Die btnClick -Methode der übergeordneten Komponente muss die Methoden und Eigenschaften der untergeordneten Komponente verwenden. Sie benötigt nur this.$refs.aaa , wobei aaa die Eigenschaft der oben gebundenen untergeordneten Komponente ist
• 4. Verwenden Sie abschließend this.$refs.aaa.name um name in der Unterkomponente zu verwenden

Damit ist dieser Artikel zur detaillierten Analyse von Vue-Unterkomponenten und übergeordneten Komponenten abgeschlossen. Weitere relevante Vue-Unterkomponenten und übergeordnete Komponenten 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!