So tätigen Sie Anrufe zwischen Vue-Komponenten

Vue ist ein sehr beliebtes JavaScript-Framework in der modernen Webentwicklung, dessen Komponenten ein sehr wichtiger Bestandteil sind. In Vue können Komponenten wiederverwendet werden, und auch die Kommunikation zwischen Komponenten ist ein häufiges Problem in der Entwicklung. In diesem Artikel werden die Kommunikationsprobleme zwischen Vue-Komponenten vorgestellt und im Detail untersucht, wie zwischen Vue-Komponenten „Anrufe getätigt“ werden.

1. Kommunikation zwischen Vue-Komponenten

In Vue wird die Kommunikation zwischen Komponenten hauptsächlich in zwei Arten unterteilt: Kommunikation zwischen Eltern-Kind-Komponenten und Kommunikation zwischen Nicht-Eltern-Kind-Komponenten.

1. Kommunikation zwischen übergeordneten und untergeordneten Komponenten

In Vue-Komponenten können übergeordnete Komponenten Daten über Requisiten an untergeordnete Komponenten weitergeben.

Vorlage der übergeordneten Komponente:

<template>
  <div>
    <child :message="message"></child>
  </div>
</template>

Skript der untergeordneten Komponente:

<script>
  export default {
    props: ['message']
  }
</script>

Die Art und Weise, wie die übergeordnete Komponente Daten an die untergeordnete Komponente übergibt, ist sehr einfach. Sie müssen lediglich das Props-Attribut zur Bezeichnung der untergeordneten Komponente hinzufügen und die erforderlichen Übertragungsdaten erhöhen durch die untergeordnete Komponente.

Nachdem die untergeordnete Komponente die von der übergeordneten Komponente übergebenen Daten empfangen hat, kann sie diese Daten in der Vorlage verwenden:

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

Das Übertragen von Daten an die untergeordnete Komponente über Requisiten ist eine der am häufigsten verwendeten Eltern-Kind-Kommunikationsmethoden in Vue. In der Praxis müssen wir möglicherweise auch die Methoden der übergeordneten Komponente ausführen oder die Daten der übergeordneten Komponente manipulieren. In diesem Fall kann das Ereignis emit zur Kommunikation zwischen der übergeordneten Komponente und der untergeordneten Komponente verwendet werden.

Übergeordnete Komponente:

<template>
  <div>
    <child @sendMsg="updateMessage"></child>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        message: ''
      }
    },
    methods: {
      updateMessage (msg) {
        this.message = msg
      }
    }
  }
</script>

Verwenden Sie die Methode $emit, um das sendMsg-Ereignis in der untergeordneten Komponente auszulösen

<script>
  export default {
    methods: {
      sendMessage () {
        this.$emit('sendMsg', 'Hello Vue!')
      }
    }
  }
</script>

2. Kommunikation zwischen Nicht-Eltern-Kind-Komponenten

Wenn es sich in Vue um keine Eltern-Kind-Beziehung handelt, dann Die Kommunikation zwischen Komponenten kann über den offiziellen Event-Bus von Vue erfolgen.

Spezifische Implementierungsmethode:

Erstellen Sie eine neue eventBus.js-Datei

import Vue from 'vue'

export const eventBus = new Vue()

In der Komponente, die kommunizieren muss, importieren Sie eventBus.js und verwenden Sie $emit, um das Ereignis auszulösen:

<script>
  import { eventBus } from './eventBus.js'

  export default {
    methods: {
      sendMessage () {
        eventBus.$emit('sendMsg', 'Hello Vue!')
      }
    }
  }
</script>

Empfangen Sie das Ereignis:

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

<script>
  import { eventBus } from './eventBus.js'

  export default {
    data () {
      return {
        message: ''
      }
    },
    created () {
      eventBus.$on('sendMsg', (msg) => {
        this.message = msg
      })
    }
  }
</script>

This Die Methode kann unterschiedlich sein Kommunikation zwischen Komponenten, es gibt jedoch bestimmte Nachteile: Wenn die Anwendung sehr komplex ist, ist es schwierig, die Kommunikationsverbindungen zwischen Komponenten zu verfolgen.

2. Kommunikationsmethoden und Auswahl zwischen Komponenten

Während des Anwendungsentwicklungsprozesses ist es notwendig, eine für die Anwendung geeignete Kommunikationsmethode auszuwählen, um die Entwicklungseffizienz und -leistung zu verbessern.

1. Die Kommunikation zwischen Eltern-Kind-Komponenten

eignet sich für Situationen, in denen Eltern-Kind-Komponenten Daten übertragen oder Vorgänge ausführen müssen. Diese Methode ist relativ einfach und leicht zu warten und zu debuggen.

2. Nicht-Eltern-Kind-Komponentenkommunikation

Anwendbar auf Situationen, in denen Kommunikation zwischen Ebenen, Brüdern und anderen Nicht-Eltern-Kind-Komponenten erforderlich ist. Durch die Verwendung der Event-Bus-Methode lässt sich die Kommunikation zwischen Komponenten einfach implementieren, es kann jedoch leicht zu Schwierigkeiten beim Debuggen und erhöhter Komplexität kommen.

3.Vuex

Vuex ist die offiziell von Vue bereitgestellte Statusverwaltungsbibliothek, die zum Verwalten des Status (einschließlich Daten und Vorgänge) in der Anwendung verwendet wird. Geeignet für größere Projekte, bei denen große Datenmengen geteilt werden müssen.

Mit Vuex können Sie die Kommunikation zwischen Komponenten in den Vuex-Speicher stellen und dann die erforderlichen Komponenten die Daten im Speicher über Getter abrufen lassen oder Aktionen verwenden, um Statusänderungen im Speicher auszulösen, die Daten im Speicher zu aktualisieren usw Benachrichtigen Sie dann andere Komponenten.

Zusammenfassung:

In der Vue-Entwicklung ist das Kommunikationsproblem zwischen Komponenten ein häufiges Problem. Wir können je nach tatsächlicher Situation zwischen Eltern-Kind-Komponentenkommunikation, Nicht-Eltern-Kind-Komponentenkommunikation und Vuex wählen. Der richtige Einsatz dieser Methoden kann die Effizienz und Leistung der Anwendungsentwicklung verbessern.

Das obige ist der detaillierte Inhalt vonSo tätigen Sie Anrufe zwischen Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!