Heim Web-Frontend View.js Vue und Vue-Router: Wie teilt man Daten zwischen Komponenten?

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

Dec 17, 2023 am 09:17 AM
vue 组件通信 vue-router

Vue和Vue-Router: 如何在组件之间共享数据?

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>{{ $sharedData.name }}</h1>
    <ChildComponent></ChildComponent>
  </div>
</template>

// ChildComponent.vue
<template>
  <div>
    <h2>{{ $sharedData.name }}</h2>
  </div>
</template>
Nach dem Login kopieren

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>{{ $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>{{ $store.state.name }}</h2>
  </div>
</template>
Nach dem Login kopieren

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

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

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

// ChildComponent.vue
<template>
  <div>
    <h2>{{ name }}</h2>
  </div>
</template>
<script>
export default {
  props: ['name']
}
</script>
Nach dem Login kopieren

在这个示例中,我们在父组件中通过: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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

So verwenden Sie Bootstrap in Vue So verwenden Sie Bootstrap in Vue Apr 07, 2025 pm 11:33 PM

Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.

So fügen Sie Funktionen zu Schaltflächen für Vue hinzu So fügen Sie Funktionen zu Schaltflächen für Vue hinzu Apr 08, 2025 am 08:51 AM

Sie können der VUE -Taste eine Funktion hinzufügen, indem Sie die Taste in der HTML -Vorlage an eine Methode binden. Definieren Sie die Methode und schreiben Sie die Funktionslogik in der VUE -Instanz.

So verweisen Sie auf die JS -Datei mit Vue.js So verweisen Sie auf die JS -Datei mit Vue.js Apr 07, 2025 pm 11:27 PM

Es gibt drei Möglichkeiten, sich auf JS -Dateien in Vue.js zu beziehen: Geben Sie den Pfad direkt mit dem & lt; Skript & gt an. Etikett;; Dynamischer Import mit dem montierten () Lebenszyklushaken; und importieren über die Vuex State Management Library.

So verwenden Sie Watch in Vue So verwenden Sie Watch in Vue Apr 07, 2025 pm 11:36 PM

Mit der Watch -Option in Vue.js können Entwickler auf Änderungen in bestimmten Daten anhören. Wenn sich die Daten ändert, löst sich eine Rückruffunktion aus, um Aktualisierungsansichten oder andere Aufgaben auszuführen. Zu den Konfigurationsoptionen gehören unmittelbar, die festlegen, ob ein Rückruf sofort ausgeführt werden soll, und Deep, das feststellt, ob Änderungen an Objekten oder Arrays rekursiv anhören sollen.

Was bedeutet VUE Multi-Page-Entwicklung? Was bedeutet VUE Multi-Page-Entwicklung? Apr 07, 2025 pm 11:57 PM

VUE Multi-Page-Entwicklung ist eine Möglichkeit, Anwendungen mithilfe des Vue.js-Frameworks zu erstellen, in dem die Anwendung in separate Seiten unterteilt ist: Code-Wartung: Die Aufteilung der Anwendung in mehrere Seiten kann das Verwalten und Wartungsbereich erleichtern. Modularität: Jede Seite kann als separates Modul für eine einfache Wiederverwendung und den Austausch verwendet werden. Einfaches Routing: Die Navigation zwischen Seiten kann durch einfache Routing -Konfiguration verwaltet werden. SEO -Optimierung: Jede Seite hat eine eigene URL, die SEO hilft.

So kehren Sie von Vue zur vorherigen Seite zurück So kehren Sie von Vue zur vorherigen Seite zurück Apr 07, 2025 pm 11:30 PM

VUE.JS hat vier Methoden, um zur vorherigen Seite zurückzukehren: $ router.go (-1) $ router.back () verwendet & lt; Router-Link to = & quot;/& quot; Komponentenfenster.history.back () und die Methodenauswahl hängt von der Szene ab.

So verwenden Sie Vue Traversal So verwenden Sie Vue Traversal Apr 07, 2025 pm 11:48 PM

Es gibt drei gängige Methoden für Vue.js, um Arrays und Objekte zu durchqueren: Die V-für-Anweisung wird verwendet, um jedes Element zu durchqueren und Vorlagen zu rendern; Die V-Bind-Anweisung kann mit V-für dynamisch Attributwerte für jedes Element verwendet werden. und die .MAP -Methode kann Array -Elemente in Neuarrays umwandeln.

Wie man einen Tag zum Vue springt Wie man einen Tag zum Vue springt Apr 08, 2025 am 09:24 AM

Zu den Methoden zum Implementieren des Sprung eines Tags in VUE gehören: Verwenden des A -Tags in der HTML -Vorlage, um das HREF -Attribut anzugeben. Verwenden Sie die Router-Link-Komponente des Vue-Routings. Verwenden Sie dies. $ Router.push () Methode in JavaScript. Parameter können durch den Abfrageparameter weitergeleitet werden, und Routen sind in den Routeroptionen für dynamische Sprünge konfiguriert.

See all articles