Implementierungsmethode der übergeordneten/untergeordneten Werteübertragungsfunktion der Komponente im Vue-Dokument

Vue ist ein beliebtes JavaScript-Framework, dessen Komponentenentwicklung uns dabei helfen kann, den Grad der Modularität bei der Entwicklung komplexer Anwendungen zu verbessern und die Wartbarkeit und Skalierbarkeit des Codes zu verbessern. In Vue ist die Datenübertragung zwischen Komponenten eine sehr häufige Anforderung, und das häufigste Szenario ist die Datenübertragung zwischen übergeordneten und untergeordneten Komponenten. Um diese Art der Datenübertragung in Vue zu implementieren, müssen wir die Implementierungsmethode der Wertübertragung zwischen übergeordneten und untergeordneten Komponenten verstehen.

In Vue-Komponenten kann eine übergeordnete Komponente gleichzeitig mehrere untergeordnete Komponenten haben. Die übergeordnete Komponente kann Daten an die untergeordneten Komponenten weitergeben. Diese Daten können die Daten der übergeordneten Komponente oder der Rückgabewert der Funktion der übergeordneten Komponente sein Komponente, die die untergeordnete Komponente aufruft. Konkret gibt es die folgenden Möglichkeiten, die Wertübertragung von Eltern-Kind-Komponenten in Vue zu implementieren:

1. Props übertragen Daten
   In Vue können wir das Props-Attribut in der untergeordneten Komponente deklarieren und es dann in Form eines Attributs in der übergeben Daten der übergeordneten Komponente in untergeordnete Komponenten. Untergeordnete Komponenten können diese Daten mithilfe von Eigenschaften empfangen, die im props-Attribut deklariert sind.

Beispielcode:

Übergeordnete Komponente:

<template>
  <div>
    <child-component :msg="helloWorld"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    data() {
      return {
        helloWorld: 'Hello World!'
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

Untergeordnete Komponente:

<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
  export default {
    props: {
      msg: String
    }
  }
</script>

In diesem Beispiel deklarieren wir ein Props-Attribut in der untergeordneten Komponente, sein Name ist msg und sein Typ ist String. Wenn Sie eine untergeordnete Komponente in einer übergeordneten Komponente verwenden, verwenden wir die v-bind-Direktive, um das helloWorld-Attribut in der übergeordneten Komponente an das msg-Attribut der untergeordneten Komponente zu binden.

2. Die untergeordnete Komponente übergibt Daten über das $emit-Ereignis an die übergeordnete Komponente.
   In Vue können wir Daten an die übergeordnete Komponente übergeben, indem wir Ereignisse auslösen. Eine untergeordnete Komponente kann ein benutzerdefiniertes Ereignis auslösen, indem sie die Funktion $emit aufruft, und die zu übergebenden Daten können als Ereignisparameter an die übergeordnete Komponente übergeben werden.

Beispielcode:

Übergeordnete Komponente:

<template>
  <div>
    <child-component @message-sent="showMessage"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    methods: {
      showMessage(msg) {
        console.log(msg)
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

Untergeordnete Komponente:

<template>
  <div>
    <button @click="sendMessage">Click Me</button>
  </div>
</template>

<script>
  export default {
    methods: {
      sendMessage() {
        this.$emit('message-sent', 'Hello World!')
      }
    }
  }
</script>

In diesem Beispiel fügen wir der untergeordneten Komponente eine Schaltfläche hinzu. Wenn auf die Schaltfläche geklickt wird, ruft die untergeordnete Komponente die Funktion sendMessage auf und löst „Create a“ aus Benutzerdefiniertes Ereignis namens message-sent und übergeben Sie den Parameter „Hello World!“ an die übergeordnete Komponente.

3. Rufen Sie die Unterkomponenteninstanz über das Ref-Attribut ab.
   In Vue können wir die Instanz der Unterkomponente abrufen, indem wir ihr das Ref-Attribut hinzufügen und dann die Methoden und Eigenschaften dieser Instanz direkt aufrufen.

Beispielcode:

Übergeordnete Komponente:

<template>
  <div>
    <button @click="showMessage">Click Me</button>
    <child-component ref="child"></child-component>
  </div>
</template>

<script>
  import ChildComponent from './ChildComponent.vue'

  export default {
    methods: {
      showMessage() {
        console.log(this.$refs.child.message)
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

Untergeordnete Komponente:

<template>
  <div>
    {{message}}
  </div>
</template>

<script>
  export default {
    data() {
      return {
        message: 'Hello World!'
      }
    }
  }
</script>

In diesem Beispiel definieren wir eine Datenattributnachricht in der untergeordneten Komponente und erhalten die untergeordnete Komponente über das ref-Attribut in der übergeordneten Komponente Beispiel. Wenn Sie auf die Schaltfläche klicken, ruft die übergeordnete Komponente die Instanz der untergeordneten Komponente über this.$refs.child ab und greift dann direkt auf die Nachrichteneigenschaft darauf zu.

Zusammenfassung:
Die oben genannten sind einige gängige Methoden zur Implementierung der Eltern-Kind-Wertübertragung von Komponenten in Vue. Unter diesen ist Props die am häufigsten verwendete Methode zum Übertragen von Daten, die den Datenübertragungstyp zwischen Komponenten klarer und klarer machen kann und eine bessere Lesbarkeit und Wartbarkeit aufweist, und die Methode zum Übertragen von Daten an die übergeordnete Komponente über das $emit-Ereignis anwendbar Es eignet sich für Szenarien, in denen Vorgänge oder Daten innerhalb von Unterkomponenten ausgeführt werden müssen, dies jedoch nicht über Requisiten erreicht werden kann. Die Methode zum Abrufen von Unterkomponenteninstanzen über Ref-Attribute eignet sich für Situationen, in denen die übergeordnete Komponente Unterkomponenten direkt bedienen muss. Komponentendaten oder Funktionen.

Das obige ist der detaillierte Inhalt vonImplementierungsmethode der übergeordneten/untergeordneten Werteübertragungsfunktion der Komponente im Vue-Dokument. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!