Gängige Methoden zur Datenfreigabe für erweiterte Vue-Anwendungen

Heute werden wir die gängigen Datenaustauschmethoden in Vue besprechen, einschließlich Requisiten, Vuex und Event Bus. Durch diese gemeinsamen Mittel können verschiedene Teile einer Vue-Anwendung problemlos Daten weitergeben und verwalten. Lasst uns beginnen.

Requisiten

Props ist die gebräuchlichste Art der Eltern-Kind-Komponentenkommunikation in Vue, die die Weitergabe von Daten an untergeordnete Komponenten über benutzerdefinierte Eigenschaften ermöglicht. Untergeordnete Komponenten können verwendet werden this.$props, um den von der übergeordneten Komponente weitergegebenen Wert abzurufen.

Das Folgende ist ein einfacher Beispielcode, der messageEigenschaften über Requisiten in der übergeordneten Komponente an untergeordnete Komponenten übergibt:

<!-- 父组件 -->
<template>
  <child-component :message="parentMessage"></child-component>
</template>

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

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

<!--子组件-->
<template>
  <div>{
   
   { message }}</div>
</template>

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

Verwenden Sie Requisiten in der untergeordneten Komponente, um den in der übergeordneten Komponente deklarierten Attributwert zu empfangen und in der Vorlage anzuzeigen.

Vuex

Vuex ist die offizielle Zustandsverwaltungsbibliothek von Vue, die eine effiziente Möglichkeit zum Datenaustausch und zur Datenverwaltung bietet. Vuex verwaltet zentral alle Daten in der Anwendung und erleichtert die Weitergabe und Verwaltung von Daten in verschiedenen Komponenten. Vuex umfasst fünf Kernteile: Zustand, Mutationen, Aktionen, Getter und Module.

Hier ist ein einfacher Vuex-Beispielcode:

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment')
      }, 1000)
    }
  },
  getters: {
    doubleCount(state) {
      return state.count * 2
    }
  }
})

export default store

Im obigen Code verwenden wir Vuex statezum Verwalten der Anwendungsstatusdaten und mutationszum Ändern des Status. actionsKann verwendet werden, um asynchrone Vorgänge abzuwickeln und mutationsZustandsänderungen durch Festschreiben erneut auszulösen. Getter wird verwendet, um einen abgeleiteten Zustand zu erhalten, beispielsweise einen berechneten Zustandswert, der eine bestimmte Bedingung erfüllt.

Veranstaltungsbus

Ein Ereignisbus ist eine einfache Methode zur Datenfreigabe, die das Senden und Empfangen von Ereignissen zwischen verschiedenen Komponenten ermöglicht. Durch die Erstellung einer Vue-Instanz als Ereignisbus können verschiedene Komponenten Ereignisse über den Ereignisbus senden und empfangen.

Hier ist ein einfacher Beispielcode für einen Ereignisbus:

// EventBus.js
import Vue from 'vue'

export const EventBus = new Vue()

// ComponentA.vue
<template>
  <button @click="onClick">点击发送事件至ComponentB</button>
</template>

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

export default {
  methods: {
    onClick() {
      EventBus.$emit('event-from-a-to-b', 'Hello from Component A')
    }
  }
}
</script>

// ComponentB.vue
<template>
  <div>{
   
   { message }}</div>
</template>

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

export default {
  data() {
    return {
      message: ''
    }
  },
  created() {
    EventBus.$on('event-from-a-to-b', (msg) => {
      this.message = msg
    })
  }
}
</script>

Im obigen Code erstellen wir eine EventBusVue-Instanz namens und verwenden sie als Ereignisbus. Wir ComponentAsenden ein Ereignis an den Ereignisbus, ComponentBhören dann das Ereignis ab und aktualisieren messageden Wert in.

Zusammenfassen

In diesem Blog werden drei gängige Methoden zur Datenfreigabe in Vue erläutert: Props, Vuex und Event Bus. Außerdem werden Beispielcodes bereitgestellt, um deren Verwendung zu veranschaulichen. Durch die Beherrschung dieser Datenfreigabetechniken können Sie Status, Daten und Bereitstellung in Ihren Vue-Anwendungen besser verwalten. Ich hoffe, dieser Blog kann Ihnen bei der Entwicklung von Vue helfen.