Vue und Vue-Router: Wie teilt man Daten zwischen Komponenten?

Vue und Vue-Router: Wie teilt man Daten zwischen Komponenten?

Einführung:
Vue ist ein beliebtes JavaScript-Framework zum Erstellen von Benutzeroberflächen. Vue-Router ist der offizielle Routing-Manager von Vue, der zur Implementierung von Single-Page-Anwendungen verwendet wird. In Vue-Anwendungen sind Komponenten die Grundeinheiten zum Erstellen von Benutzeroberflächen. In vielen Fällen müssen wir Daten zwischen verschiedenen Komponenten austauschen. In diesem Artikel werden einige Methoden vorgestellt, die Ihnen beim Datenaustausch in Vue und Vue-Router helfen, sowie spezifische Codebeispiele.

Globale Variablen:
Der einfachste Weg in Vue besteht darin, globale Variablen zum Teilen von Daten zu verwenden. Sie können die Daten, die gemeinsam genutzt werden müssen, als Eigenschaften auf der Vue-Instanz definieren. Auf diese Weise sind die Daten in allen Komponenten sichtbar. Hier ist ein einfaches Beispiel:

// main.js
import Vue from 'vue'
Vue.prototype.$sharedData = { name: 'John' }

// App.vue
<template>
  <div>
    <h1 id="sharedData-name">{{ $sharedData.name }}</h1>
    <ChildComponent></ChildComponent>
  </div>
</template>

// ChildComponent.vue
<template>
  <div>
    <h2 id="sharedData-name">{{ $sharedData.name }}</h2>
  </div>
</template>

Durch die Definition von $sharedData im Vue-Prototyp können wir über this.$sharedData auf die gemeinsam genutzten Daten in jeder Komponente zugreifen. $sharedData，我们可以在任意组件中通过this.$sharedData来访问共享的数据。

Vuex：
如果你的应用需要更复杂的状态管理，Vue官方提供了一个强大的状态管理模式和库——Vuex。Vuex将所有共享的数据集中管理，通过store对象来访问数据。以下是一个使用Vuex的示例：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    name: 'John'
  },
  mutations: {
    updateName(state, payload) {
      state.name = payload
    }
  },
  actions: {
    updateNameAsync({ commit }, payload) {
      setTimeout(() => {
        commit('updateName', payload)
      }, 1000)
    }
  },
  getters: {
    getName: state => {
      return state.name
    }
  }
})

export default store

// App.vue
<template>
  <div>
    <h1 id="store-state-name">{{ $store.state.name }}</h1>
    <button @click="updateName">更新名字</button>
    <ChildComponent></ChildComponent>
  </div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations(['updateName']),
  }
}
</script>

// ChildComponent.vue
<template>
  <div>
    <h2 id="store-state-name">{{ $store.state.name }}</h2>
  </div>
</template>

在这个示例中，我们使用Vuex创建了一个store对象。store中的state对象存储共享的数据。mutations对象定义了更新数据的方法，actions对象定义了异步更新数据的方法。getters对象定义了获取数据的方法。在组件中，我们可以通过this.$store.state来获取共享的数据，并通过commit方法调用mutations中的方法来更新数据。

通过props传递数据：
在Vue中，组件之间可以通过props来传递数据。这是一种常见的组件通信方式，特别适用于父子组件之间。以下是一个使用props传递数据的示例：

// App.vue
<template>
  <div>
    <h1 id="name">{{ name }}</h1>
    <ChildComponent :name="name"></ChildComponent>
  </div>
</template>

// ChildComponent.vue
<template>
  <div>
    <h2 id="name">{{ name }}</h2>
  </div>
</template>
<script>
export default {
  props: ['name']
}
</script>

在这个示例中，我们在父组件中通过:name="name"

Vuex:

Wenn Ihre Anwendung eine komplexere Zustandsverwaltung erfordert, stellt Vue offiziell ein leistungsstarkes Zustandsverwaltungsmodell und eine leistungsstarke Bibliothek bereit – Vuex. Vuex verwaltet zentral alle gemeinsam genutzten Daten und greift über Store-Objekte auf Daten zu. Hier ist ein Beispiel mit Vuex:
rrreee

In diesem Beispiel erstellen wir ein Store-Objekt mit Vuex. Das Statusobjekt im Speicher speichert gemeinsam genutzte Daten. Das Mutationsobjekt definiert Methoden zum Aktualisieren von Daten und das Actions-Objekt definiert Methoden zum asynchronen Aktualisieren von Daten. Das Getters-Objekt definiert Methoden zum Abrufen von Daten. In der Komponente können wir die gemeinsam genutzten Daten über this.$store.state abrufen und die Methoden in Mutationen über die Methode commit aufrufen, um die Daten zu aktualisieren. 🎜🎜Daten über Requisiten übertragen: 🎜In Vue können Daten zwischen Komponenten über Requisiten übergeben werden. Dies ist eine übliche Art der Komponentenkommunikation, insbesondere zwischen übergeordneten und untergeordneten Komponenten. Hier ist ein Beispiel für die Übergabe von Daten mithilfe von Requisiten: 🎜rrreee🎜 In diesem Beispiel übergeben wir das Namensattribut über :name="name" in der übergeordneten Komponente an die untergeordnete Komponente. Die untergeordnete Komponente empfängt Daten über das Props-Attribut und zeigt sie auf der Seite an. 🎜🎜Zusammenfassung: 🎜In diesem Artikel werden verschiedene Methoden vorgestellt, um den Datenaustausch zwischen Komponenten in Vue und Vue-Router zu erreichen. Durch globale Variablen, Vuex und Requisiten können wir entsprechend den Anforderungen der Anwendung die geeignete Art der Datenfreigabe wählen. Ich hoffe, diese Beispiele sind hilfreich für Sie. 🎜

Das obige ist der detaillierte Inhalt vonVue und Vue-Router: Wie teilt man Daten zwischen Komponenten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!