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 message
Eigenschaften ü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 state
zum Verwalten der Anwendungsstatusdaten und mutations
zum Ändern des Status. actions
Kann verwendet werden, um asynchrone Vorgänge abzuwickeln und mutations
Zustandsä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 EventBus
Vue-Instanz namens und verwenden sie als Ereignisbus. Wir ComponentA
senden ein Ereignis an den Ereignisbus, ComponentB
hören dann das Ereignis ab und aktualisieren message
den 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.