Sechs Möglichkeiten zur Kommunikation zwischen Vue-Komponenten

Vue ist ein beliebtes JavaScript-Framework zum Erstellen von Single-Page-Anwendungen. In Vue sind Komponenten die Grundeinheit zum Erstellen von Anwendungen. Komponenten sind wiederverwendbare Codeblöcke, die zum Anzeigen und Verarbeiten von Daten verwendet werden. Die Komponentenkommunikation ist einer der Kernmechanismen für die Datenübertragung und Interaktion zwischen Komponenten. In diesem Artikel untersuchen wir sechs Möglichkeiten, wie Komponenten kommunizieren.

1. Requisiten und Events

Requisiten und Events sind die grundlegendsten Kommunikationsmethoden in Vue. Über Requisiten übergeben übergeordnete Komponenten Daten an untergeordnete Komponenten. Die untergeordnete Komponente sendet Daten über den Ereigniskonstruktor an die übergeordnete Komponente. Diese Kommunikationsmethode zeichnet sich durch eine einseitige Übertragung aus.

Die übergeordnete Komponente übergibt Daten über Requisiten an die untergeordnete Komponente:

<template>
  <child-component :message="parentMessage"></child-component>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    data() {
      return {
        parentMessage: 'this is parent'
      }
    },
    components: {
      ChildComponent
    }
  }
</script>

In der untergeordneten Komponente müssen Sie Requisiten deklarieren und Requisiten verwenden, um Daten von der übergeordneten Komponente zu empfangen:

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

Dann sendet die untergeordnete Komponente Daten an die übergeordnete Komponente durch Ereignisse:

<template>
  <button @click="updateParentMessage">Update Parent Message</button>
</template>
<script>
  export default {
    methods: {
      updateParentMessage() {
        this.$emit('update-message', 'this is child');
      }
    }
  }
</script>

In der übergeordneten Komponente müssen Sie auf Ereignisse für die untergeordnete Komponente warten und Daten von der untergeordneten Komponente in der Ereignisüberwachungsfunktion empfangen:

<template>
  <child-component :message="parentMessage" @update-message="updateMessage"></child-component>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    data() {
      return {
        parentMessage: 'this is parent'
      }
    },
    components: {
      ChildComponent
    },
    methods: {
      updateMessage(message) {
        this.parentMessage = message;
      }
    }
  }
</script>

2Vuex ist ein offizielles Plug-in. für das Staatsmanagement in Vue. Vuex implementiert ein globales Zustandsverwaltungsmodell. Es verwaltet den Status aller Komponenten der Anwendung zentral über einen Store. Wenn mehrere Komponenten den Status teilen, erleichtert die Verwendung von Vuex die Verwaltung des Datenaustauschs und der Kommunikation zwischen Komponenten.

Zuerst müssen wir einen Vuex-Store erstellen:

import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    message: 'hello world'
  },
  mutations: {
    updateMessage(state, message) {
      state.message = message
    }
  },
  actions: {
    updateMessage({ commit }, message) {
      commit('updateMessage', message)
    }
  },
  getters: {
    getMessage: state => state.message
  }
})

export default store

In der Komponente können wir $store verwenden, um auf den Status im Store zuzugreifen, und die Commit-Methode verwenden, um Mutationen zu übermitteln, um den Status zu ändern:

<template>
  <div>{{ this.$store.getters.getMessage }}</div>
  <button @click="updateMessage">Update Message</button>
</template>
<script>
  export default {
    methods: {
      updateMessage() {
        this.$store.dispatch('updateMessage', 'hello vuex')
      }
    }
  }
</script>

Drei, $parent und $children

Jede Komponente in Vue verfügt über die Eigenschaften $parent und $children. Die Eigenschaft „$parent“ verweist auf die übergeordnete Komponente der Komponente und die Eigenschaft „$children“ verweist auf die untergeordneten Komponenten der Komponente. Über die Eigenschaften $parent und $children können Komponenten direkt auf die Daten und Methoden der übergeordneten und untergeordneten Komponenten zugreifen.

Zum Beispiel kann die übergeordnete Komponente über das Attribut $children auf die Daten und Methoden der untergeordneten Komponente zugreifen:

<template>
  <div>
    {{ $children[0].message }}
    <button @click="$children[0].updateMessage">Update message</button>
  </div>
</template>

In der untergeordneten Komponente müssen die Methoden message und updateMessage definiert werden:

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'hello child'
      }
    },
    methods: {
      updateMessage() {
        this.message = 'hello parent'
      }
    }
  }
</script>

4

Jede Komponente in Vue verfügt über ein $refs-Attribut. Das Attribut $refs ist ein Objekt, das Verweise auf Unterkomponenten oder DOM-Elemente enthält, die mithilfe des ref-Attributs in der Komponente benannt wurden. Über das Attribut $refs können Komponenten aufeinander verweisen und aufrufen.

Zum Beispiel können wir die Referenz der untergeordneten Komponente über das ref-Attribut in der übergeordneten Komponente abrufen:

<template>
  <div>
    <child-component ref="childComponent"></child-component>
    <button @click="updateMessage">Update message</button>
  </div>
</template>
<script>
  import ChildComponent from './ChildComponent.vue'
  export default {
    components: {
      ChildComponent
    },
    methods: {
      updateMessage() {
        this.$refs.childComponent.updateMessage()
      }
    }
  }
</script>

In der untergeordneten Komponente müssen wir die updateMessage-Methode definieren:

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    data() {
      return {
        message: 'hello child'
      }
    },
    methods: {
      updateMessage() {
        this.message = 'hello parent'
      }
    }
  }
</script>

5 ist ein weit verbreitetes zentrales Ereignissystem, das Ereignisse zwischen Vue-Komponenten effizient übermittelt. Event Bus ist eine einfache Vue-Instanz, die Ereignisse über die Methode $emit an andere Vue-Komponenten senden und auch von anderen Vue-Komponenten gesendete Ereignisse über die Methode $on empfangen kann.

Bei der Implementierung von Event Bus müssen wir eine neue Vue-Instanz erstellen:

import Vue from 'vue'

const bus = new Vue()

export default bus

Dann können wir Event Bus in die Komponente einführen und $emit zum Senden von Ereignissen und $on zum Empfangen von Ereignissen verwenden:

// 发送事件
import Bus from './Bus.js'

Bus.$emit('event-name', data)

// 接收事件
import Bus from './Bus.js'

Bus.$on('event-name', (data) => {
  console.log(data)
})

6 Inject

Das neue Provide und Inject in Vue 2.2 ist eine fortschrittliche Komponentenkommunikationsmethode. Provide und Inject ermöglichen es einer übergeordneten Komponente, Daten an alle untergeordneten Komponenten weiterzuleiten, anstatt nur an direkte untergeordnete Komponenten. Provide und Inject sind eine Form der Komponentenkommunikation, die sich von Requisiten, Ereignissen und $parent/$children unterscheidet. Es handelt sich um eine flexiblere und gekapselte Kommunikationsmethode.

Die übergeordnete Komponente stellt Daten bereit, indem wir bereitstellen:

<template>
  <child-component></child-component>
</template>
<script>
  export default {
    provide: {
      message: 'hello provide'
    }
  }
</script>

In der untergeordneten Komponente müssen wir inject definieren, um die von der übergeordneten Komponente übergebenen Daten zu empfangen:

<template>
  <div>{{ message }}</div>
</template>
<script>
  export default {
    inject: ['message']
  }
</script>

Dies ist eine Einführung in die sechs Kommunikationsmethoden der Vue-Komponente. Unterschiedliche Anwendungsszenarien erfordern unterschiedliche Komponentenkommunikationsmethoden. Die Beherrschung dieser Kommunikationsmethoden kann die Entwicklung von Vue-Komponenten effizienter, einfacher und flexibler machen.

Das obige ist der detaillierte Inhalt vonSechs Möglichkeiten zur Kommunikation zwischen Vue-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!