Eine kurze Analyse, wie Parameter an übergeordnete Geschwisterkomponenten in Vue übergeben werden

Vue ist ein beliebtes JavaScript-Framework zum Erstellen von Benutzeroberflächen und Single-Page-Anwendungen. In Vue sind Komponenten die Grundbausteine ​​einer Anwendung und können wiederverwendet und kombiniert werden, um größere Anwendungen zu erstellen. In einer Vue-Komponente müssen Sie möglicherweise Parameter an die übergeordneten Geschwisterkomponenten übergeben. In diesem Artikel wird detailliert beschrieben, wie diese Funktion in Vue implementiert wird.

Was ist Vue?

Vue ist ein leichtes Framework, das sich durch einfache Bedienung, prägnanten Code, leistungsstarke Funktionen, Mobilfreundlichkeit usw. auszeichnet. Die offizielle Dokumentation von Vue bietet einen vollständigen Satz an Tutorials und Dokumentationen sowie eine API-Dokumentation zur einfachen Verwendung durch Entwickler. Darüber hinaus ist die Community sehr aktiv und es gibt viele fortschrittliche Frameworks wie Nuxt.js, die Entwicklern mehr Hilfe bieten.

Vue-Komponenten

Vue-Komponenten sind die Grundbausteine ​​in Vue-Anwendungen. Mit Komponenten können Entwickler wiederverwendbare UI-Komponenten erstellen und diese Komponenten kombinieren, um größere Anwendungen zu erstellen. Vue-Komponenten werden von unten nach oben erstellt, wobei übergeordnete Komponenten untergeordnete Komponenten enthalten, die möglicherweise weitere untergeordnete Komponenten enthalten, was letztendlich zu einer vollständigen Anwendung führt.

In dieser Eltern-Kind-Beziehung kann die übergeordnete Komponente Daten über das Props-Attribut an die untergeordnete Komponente übergeben. Props ist eine Eigenschaft, die zum Übergeben von Daten an die Komponente verwendet wird.

Eltern-Kind-Komponenten

In Vue ist die Kommunikation zwischen Eltern-Kind-Komponenten ein sehr häufiges Szenario. Im Komponentenbaum können übergeordnete Komponenten Daten über Requisiten an untergeordnete Komponenten weitergeben, wodurch der Datenfluss zwischen Komponenten sehr einfach wird. Die übergeordnete Komponente kann über einige Daten oder Methoden verfügen, und die untergeordnete Komponente kann auf der Grundlage dieser Daten und Methoden programmiert werden. Normalerweise empfangen untergeordnete Komponenten Daten, die von übergeordneten Komponenten über Props-Attribute übergeben werden, und verwenden diese Daten dann für ihre eigene Geschäftslogik.

Die übergeordnete Komponente verwendet das Props-Attribut, um Daten an die untergeordnete Komponente zu übergeben, und die untergeordnete Komponente verwendet die $emit-Methode, um Daten an die übergeordnete Komponente zu senden. In einigen Szenarien besteht jedoch keine direkte Eltern-Kind-Beziehung, sondern eine Bruderbeziehung (wie in der folgenden Abbildung dargestellt). In diesem Fall muss der Ereignisbus EventBus oder Vuex zum Übertragen von Daten verwendet werden.

Geschwisterkomponenten

In Vue erfordert die Kommunikation zwischen Geschwisterkomponenten die Verwendung eines zentralen Ereignisbusses, EventBus. Dieser Ereignisbus ist eine Vue-Instanz, die zum Versenden und Abhören von Ereignissen verwendet werden kann. In einer Vue-Instanz können wir die Methode $on verwenden, um auf Ereignisse zu warten, und die Methode $emit, um Ereignisse auszulösen. Für Geschwisterkomponenten müssen wir den zentralen Ereignisbus als globale Variable in das Fenster importieren, ein Ereignis über die $emit-Methode in der Komponente auslösen und dann das Ereignis über die $on-Methode in einer anderen Komponente abhören und schließlich sein in der Lage, die Lieferdaten korrekt zu empfangen.

Die Verwendung des Ereignisbusses zum Aufbau der Kommunikation zwischen Geschwisterkomponenten kann den Code klarer machen, und es ist nicht erforderlich, Vuex zum Verwalten des Status zu verwenden, was eine relativ einfache Implementierungsmethode ist.

Code-Implementierung

Das Folgende ist ein Beispiel für die Verwendung der zentralen Ereignisbuskommunikation in Vue. Angenommen, es gibt zwei Geschwisterkomponenten, zwischen denen Daten übertragen werden müssen:

<!-- 兄弟组件A -->
<template>
  <div>
    <button @click="sendMessage">发送数据</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendMessage() {
        // 将数据作为参数传递给事件
        this.$bus.$emit('message', '这是一条来自兄弟组件A的消息')
      }
    }
  }
</script>

<!-- 兄弟组件B -->
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: ''
      }
    },
    created() {
      // 监听事件，传递数据到message
      this.$bus.$on('message', (message) => {
        this.message = message
      })
    }
  }
</script>

<!-- 中央事件总线 -->
<script>
  import Vue from 'vue'
  export default new Vue()
</script>

Im Code verwenden wir die Vue-Instanz als Zentrale Event Bus, senden Sie Daten über die Methode sendMessage in der Geschwisterkomponente A an den Ereignisbus, hören Sie dann das Ereignis über die Methode create in der Geschwisterkomponente B ab und weisen Sie die empfangenen Daten einer konstanten Nachricht zu. Schließlich wird der Wert dieser Konstante in der Geschwisterkomponente B angezeigt, um die Datenübertragung zwischen Geschwisterkomponenten zu realisieren.

Zusammenfassung

In Vue ist die Datenübertragung zwischen Vater und Sohn sehr natürlich und direkt, aber die Datenübertragung zwischen Brüdern erfordert die Verwendung von Event Bus oder Vuex. Kurz gesagt, die Kommunikation zwischen Geschwisterkomponenten in Vue ist nicht schwierig. Wir können den Vue-eigenen Ereignisbusmechanismus verwenden, um eine einfache Datenübertragung zu erreichen. Dieser Ansatz ist einfach und leicht zu warten und erfordert keine Verwendung redundanter Bibliotheken oder Frameworks.

Das obige ist der detaillierte Inhalt vonEine kurze Analyse, wie Parameter an übergeordnete Geschwisterkomponenten in Vue übergeben werden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!