So implementieren Sie die Kommunikation zwischen übergeordneten und untergeordneten Komponenten mit Vue

1. Beziehung zwischen übergeordneten und untergeordneten Komponenten

Dieser Artikel fasst die Kommunikationsmethode zwischen übergeordneten und untergeordneten Komponenten in Vue zusammen.

Wie ist nun die Beziehung zwischen übergeordneten und untergeordneten Komponenten in Vue aufgebaut bzw. welche Komponente kann als übergeordnete Komponente und welche als untergeordnete Komponente bezeichnet werden?

Nach meinem Verständnis ist auch die Beziehung zwischen übergeordneten und untergeordneten Komponenten relativ einfach.

In Projekten, die mit dem Tool vue-cli erstellt wurden, registrieren wir häufig einen Verweis auf eine andere Komponente in einer Komponente.

Startseite.vue

<Vorlage>
  <div Klasse="Startseite">
    <p>Dies ist die Home-Komponente</p>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: 'Home'
}
</Skript>
<Stilbereich>
    .heim{
        Rahmen: 1px durchgezogen #4488ff;
        Anzeige: Inline-Block;
        Polsterung: 10px;
    }
</Stil>

App.vue

<Vorlage>
  <div id="app">
    <p>Hier ist die App-Komponente</p>
    <!-- stpe3: Verwenden -->
    <Startseite></Startseite>
  </div>
</Vorlage>

<Skript>
// Schritt 1: Home aus „./components/Home“ importieren
Standard exportieren {
  Name: "App",
  // Schritt 2: Komponenten registrieren: { Home }   
}
</Skript>

<Stil>
#app {
  Schriftfamilie: „Avenir“, Helvetica, Arial, serifenlos;
  -webkit-font-smoothing: Kantenglättung;
  -moz-osx-font-smoothing: Graustufen;
  Farbe: #2c3e50;
  Anzeige: Inline-Block;
  Rand: 1px, durchgehend orange;
  Polsterung: 10px;
}
</Stil>

In den beiden oben genannten Komponenten haben wir die Home-Komponente in der App-Komponente eingeführt, registriert und verwendet.

In Vue können wir die App-Komponente als übergeordnete Komponente und die Home-Komponente als untergeordnete Komponente bezeichnen. Diese beiden Komponenten bilden eine übergeordnete/untergeordnete Beziehung.

Wichtig dabei ist zu beachten, dass die drei Schritte Einführung, Registrierung und Nutzung unabdingbar sind.

Andernfalls können die beiden Komponenten weder eine Eltern-Kind-Beziehung bilden, noch können sie mithilfe der verschiedenen, später zusammengefassten Kommunikationsmethoden kommunizieren.

Nachdem ich die Kompositionsbeziehung von Eltern-Kind-Komponenten in Vue verstanden habe, werde ich nun vorstellen, wie Eltern-Kind-Komponenten miteinander kommunizieren.

2. Requisiten

Die erste Möglichkeit für die Kommunikation zwischen übergeordneten und untergeordneten Komponenten in Vue ist das Props-Attribut, und die übergeordnete Komponente kommuniziert mit der untergeordneten Komponente.

Lassen Sie es uns in die Praxis umsetzen.

Suchen Sie zunächst die Stelle, an der die untergeordnete Komponente in der übergeordneten Komponente verwendet wird, und fügen Sie die Daten hinzu, die die übergeordnete Komponente an die untergeordnete Komponente übergeben muss.

App.vue (einige unveränderte Codes weggelassen)

<Vorlage>
  <div id="app">
    <p>Hier ist die App-Komponente</p>
    <Startseite
        Titel="Kommunikationsmethode zwischen übergeordneten und untergeordneten Komponenten in Vue"
        Datum="05.03.2020 14:25">
    </Startseite>
  </div>
</Vorlage>

Wie Sie sehen, haben wir in diesem Schritt zwei Daten hinzugefügt, die an die Unterkomponente übergeben werden müssen, wo die Unterkomponente verwendet wird: Titel und Datum.

<Startseite
     Titel="Kommunikationsmethode zwischen übergeordneten und untergeordneten Komponenten in Vue"
     Datum="05.03.2020 14:25">
</Startseite>

Der nächste Schritt besteht darin, Props in der untergeordneten Komponente zu verwenden, um diese beiden Parameter zu erhalten.

Home.vue (einige unveränderte Codes weggelassen)

<Skript>
Standard exportieren {
  Name: "Home",
  Requisiten: ['Titel', 'Datum']
}
</Skript>

Im letzten Schritt können wir Titel und Datum in der untergeordneten Komponente verwenden, genau wie bei der Verwendung von Vue-Daten.

Home.vue (einige unveränderte Codes weggelassen)

<Vorlage>
  <div Klasse="Startseite">
    <p>Dies ist die Home-Komponente</p>
    <p>Titel:{{title}}</p>
    <p>Datum:{{Datum}}</p>
  </div>
</Vorlage>

Überprüfen Sie nach dem Start des Projekts die Wirkung im Browser.

3. $emit

Die zweite Möglichkeit der Kommunikation zwischen übergeordneten und untergeordneten Komponenten in Vue erfolgt über die Methode $emit, die die Kommunikation zwischen der untergeordneten und der übergeordneten Komponente ermöglicht.

Die Methode $emit ist eine Instanzmethode von Vue und wird wie folgt verwendet:

Der erste Parameter eventName wird als Ereignisname bezeichnet.

Das dem Ereignisnamen entsprechende Ereignis ist ein natives DOM-Ereignis, das von v-on in der übergeordneten Komponente abgehört wird (es kann als benutzerdefiniertes Ereignis wie „Klick“ verstanden werden).

Wenn wir $emit(eventName) in der untergeordneten Komponente ausführen, wird das entsprechende Ereignis in der übergeordneten Komponente ausgelöst.

Daher verwenden wir zuerst die Methode $emit in der untergeordneten Komponente, um Code zu schreiben (ohne den zweiten Parameter zu übergeben), um das Ereignis in der übergeordneten Komponente auszulösen.

Startseite.vue

<Vorlage>
  <div Klasse="Startseite">
    <p>Dies ist die Home-Komponente</p>
    <el-button type="primary" v-on:click='btnClickHandler("Yes")'>Ja</el-button>
    <el-button type="primary" v-on:click='btnClickHandler("No")'>Nein</el-button>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: "Home",
  Methoden: {
    btnClickHandler: Funktion (Param) {
        wenn(param == "Ja"){
            dies.$emit('sayYes');
        }sonst wenn(param == "Nein"){
            dies.$emit('sayNo');
        }
    }
  }
}
</Skript>

Wie Sie sehen, gibt es in der Home-Unterkomponente zwei Schaltflächen.

Wenn die Schaltfläche [Ja] geklickt wird, wird this.$emit('sayYes') ausgeführt, wodurch das sayYes-Ereignis in der übergeordneten Komponente ausgelöst wird.

Wenn auf die Schaltfläche [Nein] geklickt wird, wird this.$emit('sayNo') ausgeführt, wodurch das sayNo-Ereignis in der übergeordneten Komponente ausgelöst wird.

Anschließend implementieren wir die entsprechenden nativen DOM-Ereignisse in der übergeordneten Komponente.

App.vue

<Vorlage>
  <div id="app">
    <p>Hier ist die App-Komponente</p>
    <Startseite
        v-on:sayYes='val="yes"'
        v-on:sayNo='val="no"'>
    </Startseite>
    <p>Wert: {{val}}</p>
  </div>
</Vorlage>

<Skript>
Home aus './components/Home' importieren
Standard exportieren {
  Name: "App",
  Daten() {
    zurückkehren {
      Wert: "Standard",
    }
  },
  Komponenten: { Home },
}
</Skript>

Unter diesen sind sayYes und sayNo native DOM-Ereignisse, die in der übergeordneten Komponente definiert sind.

<Startseite
        v-on:sayYes='val="yes"'
        v-on:sayNo='val="no"'>
</Startseite>

val sind Daten, die in der übergeordneten Komponente definiert sind, und ihr Standardwert lautet „default“.

In Kombination mit der Codelogik der Unterkomponente wissen wir, dass die folgenden Ergebnisse erzielt werden:

Wenn die Schaltfläche [Ja] angeklickt wird, wird this.$emit('sayYes') ausgeführt, wodurch das sayYes-Ereignis in der übergeordneten Komponente ausgelöst wird. Im sayYes-Ereignis wird der val-Wert in den Vue-Daten in yes geändert.

Wenn die Schaltfläche [Nein] angeklickt wird, wird this.$emit('sayNo') ausgeführt, wodurch das sayNo-Ereignis in der übergeordneten Komponente ausgelöst wird. Im sayNo-Ereignis wird der val-Wert in den Vue-Daten in no geändert.

Überprüfen Sie unsere Erklärung in Ihrem Browser.

IV. $übergeordnetes Element

$parent ist eine Instanzeigenschaft von Vue, die die übergeordnete Instanz der aktuellen Komponente darstellt.

Wenn in der übergeordneten Komponente eine Methode namens sayYes vorhanden ist, können Sie this.$parent.sayYes direkt in der untergeordneten Komponente verwenden, um die Methode der übergeordneten Komponente aufzurufen.

App.vue

<Vorlage>
  <div id="app">
    <p>Hier ist die App-Komponente</p>
    <Startseite></Startseite>
    <p>Wert: {{val}}</p>
  </div>
</Vorlage>

<Skript>
Home aus './components/Home' importieren
Standard exportieren {
  Name: "App",
  Daten() {
    zurückkehren {
      Wert: "Standard",
    }
  },
  Komponenten: { Home },
  Methoden: {
    sagJa: Funktion() {
      dies.val = "ja";
    },
    sagNein: Funktion() {
      this.val = "nein";
    }
  }
}
</Skript>

Wir haben in der übergeordneten Komponente zwei Methoden definiert: sayYes und sayNo und ihre Logik lautet: Ändere den Wert von val in yes; ändere den Wert von val in no.

Anschließend können Sie this.$parent.sayYes und this.$parent.sayNo in der untergeordneten Komponente verwenden, um die entsprechenden sayYes- und sayNo-Methoden in der übergeordneten Komponente aufzurufen.

Startseite.vue

<Vorlage>
  <div Klasse="Startseite">
    <p>Dies ist die Home-Komponente</p>
    <el-button type="primary" v-on:click='btnClickHandler("Yes")'>Ja</el-button>
    <el-button type="primary" v-on:click='btnClickHandler("No")'>Nein</el-button>
  </div>
</Vorlage>
<Skript>
Standard exportieren {
  Name: "Home",
  Methoden: {
    btnClickHandler: Funktion (Param) {
        wenn(param == "Ja"){
            dies.$parent.sayYes();
        }sonst wenn(param == "Nein"){
            dies.$parent.sayNo();
        }
    }
  }
}
</Skript>

Der Code der Methode btnClickHandler in der untergeordneten Komponente wurde in this.$parent geändert.

Dann schauen wir uns die Ergebnisse an.

V. Fazit

Zu diesem Zeitpunkt wurden die Kommunikationsmethoden der übergeordneten und untergeordneten Komponenten in Vue zusammengefasst. Die folgenden Methoden werden jeweils zusammengefasst:

Das erste: übergeordnete Komponente kommuniziert mit untergeordneter Komponente - Props-Attribut

Die zweite Methode: Untergeordnete Komponente kommuniziert mit übergeordneter Komponente - $emit-Methode

Der dritte Typ: Untergeordnete Komponenten kommunizieren mit übergeordneten Komponenten – $parent-Attribut

Oben finden Sie Einzelheiten zur Verwendung von Vue zur Realisierung der Kommunikation zwischen übergeordneten und untergeordneten Komponenten. Weitere Informationen zur Kommunikation zwischen übergeordneten und untergeordneten Komponenten in Vue finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!