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

<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>

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

import Vue from 'vue'

const bus = new Vue()

export default bus

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

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

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

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

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

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

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!