Implementierungsmethoden für Komponentendatenübertragung und Ereignisübertragung in der Vue-Dokumentation

Vue ist ein beliebtes Front-End-Framework. Es verfügt über Komponentenisierungsfunktionen, die es Entwicklern ermöglichen, eine komplexe Seite in kleine und unabhängige Module zu zerlegen. In Vue sind Datenübertragung und Ereignisübertragung zwischen Komponenten sehr wichtige Themen. In diesem Artikel werden wir die Implementierungsmethoden der Komponentendatenübertragung und Ereignisübertragung in Vue ausführlich vorstellen.

1. Komponentendatenübertragung

In Vue ist die Übertragung von Komponentendaten in zwei Kategorien unterteilt: Die eine ist die Übertragung der übergeordneten Komponente zur untergeordneten Komponente und die andere die Übertragung der untergeordneten Komponente zur übergeordneten Komponente.

1. Die übergeordnete Komponente übergibt Daten an die untergeordnete Komponente.

Um Daten von der übergeordneten Komponente an die untergeordnete Komponente weiterzugeben, müssen Sie die Option „Props“ verwenden, um von der übergeordneten Komponente übergebene Daten zu empfangen. Übergeben Sie Daten über v-bind: Attributname in der übergeordneten Komponente an die untergeordnete Komponente und empfangen Sie Daten über die Option props in der untergeordneten Komponente.

Schauen Sie sich zuerst den Code in der übergeordneten Komponente an:

<template>
  <div>
    <child-component :title="title"></child-component>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data () {
    return {
      title: 'this is the title'
    }
  }
}
</script>

Im obigen Code definieren wir eine Hauptkomponente und übergeben das Titelattribut über v-bind: an die untergeordnete Komponentenkomponente.

Dann schauen Sie sich den Code der Unterkomponente an:

<template>
  <div>
    <h1>{{ title }}</h1>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      required: true
    }
  }
}
</script>

Im obigen Code definieren wir eine Unterkomponente und erhalten das von der übergeordneten Komponente über die Option props übergebene Titelattribut.

2. Die Unterkomponente übergibt Daten an die übergeordnete Komponente. Um Daten von der Unterkomponente an die übergeordnete Komponente zu übergeben, müssen Sie die Methode $emit verwenden. Mit $emit kann die Unterkomponente Daten an die übergeordnete Komponente übergeben. Verwenden Sie die Methode $emit in der untergeordneten Komponente, um ein benutzerdefiniertes Ereignis auszulösen und die zu übergebenden Daten über den @event-Namen in der übergeordneten Komponente zu übergeben und die von der untergeordneten Komponente übergebenen Daten zu empfangen Ereignisantwortfunktion.

Schauen Sie sich zuerst den Code in der Unterkomponente an:

<template>
  <div>
    <button @click="increment">{{ count }}</button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      count: 0
    }
  },
  methods: {
    increment () {
      this.count++
      this.$emit('increment', this.count)
    }
  }
}
</script>

Im obigen Code definieren wir eine Unterkomponente und verwenden die Methode $emit, um ein benutzerdefiniertes Ereignisinkrement auszulösen, wenn auf die Schaltfläche geklickt wird, und verwenden den aktuellen Zählwert als Parameter Wird an die übergeordnete Komponente übergeben.

Dann schauen Sie sich den Code der übergeordneten Komponente an:

<template>
  <div>
    <h1>{{ totalCount }}</h1>
    <child-component @increment="onChildIncrement"></child-component>
  </div>
</template>

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

export default {
  components: { ChildComponent },
  data () {
    return {
      totalCount: 0
    }
  },
  methods: {
    onChildIncrement (count) {
      this.totalCount += count
    }
  }
}
</script>

Im obigen Code definieren wir eine übergeordnete Komponente und übergeben beim Abhören des Inkrementierungsereignisses der untergeordneten Komponente den Zählwert als Parameter an die Antwortfunktion onChildIncrement und in der Antwort den Wert von totalCount in der Funktion aktualisieren.

2. Zustellung von Komponentenereignissen

In Vue kann die Zustellung von Ereignissen zwischen Komponenten über den Ereignisbus und Vuex erreicht werden.

1. Ereignisbus

Der Ereignisbus ist eine einfache Methode zur Ereignisübermittlung. Er erstellt einen zentralen Ereignisbus, und alle Komponenten können Ereignisse registrieren oder Ereignisse im Ereignisbus auslösen. In Vue können Sie die Eigenschaft Vue.prototype.$bus verwenden, um einen Ereignisbus zu erstellen.

Sehen wir uns zunächst an, wie der Ereignisbus verwendet wird:

// main.js中创建事件总线
import Vue from 'vue'

Vue.prototype.$bus = new Vue()

// 在需要传递事件的组件中注册事件和触发事件
this.$bus.$emit('my-event', data)

this.$bus.$on('my-event', (data) => { ... })

Im obigen Code erstellen wir einen Ereignisbus über die Eigenschaft Vue.prototype.$bus in der Datei main.js und übergeben dann $ in der Komponente muss das Ereignis übergeben. Die Emit-Methode löst das benutzerdefinierte Ereignis my-event aus und übergibt die Daten, die als Parameter an die Antwortfunktion des Ereignisses in der Komponente übergeben werden müssen, die das Ereignis empfangen muss, auf das benutzerdefinierte Ereignis event my-event über die $on-Methode und in der Event-Response-Funktion Empfangen Sie die übergebenen Daten.

2.vuex

vuex ist eine offiziell empfohlene Zustandsverwaltungslösung. Sie platziert den Zustand aller Komponenten in einem globalen Zustandsbaum, und alle Komponenten können den Zustand aus dem globalen Zustandsbaum abrufen und aktualisieren. In vuex können Sie Speicherobjekte verwenden, um den globalen Status zu speichern und den globalen Status durch Mutationen, Aktionen und Getter zu ändern.

Sehen wir uns zunächst die Verwendung von Vuex an:

// store.js文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

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

// 在组件中使用vuex
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState({
      count: state => state.count
    }),
    ...mapGetters([
      'doubleCount'
    ])
  },
  methods: {
    ...mapMutations([
      'increment'
    ]),
    ...mapActions([
      'asyncIncrement'
    ])
  }
}

Im obigen Code definieren wir ein Speicherobjekt, das den globalen Status in der Datei store.js speichert, und verwenden Mutationen, Aktionen und Getter, um den globalen Status zu ändern und abzurufen ; Ordnen Sie in der Komponente den Status, die Änderungsfunktion und die Aktionsfunktion im Speicher über Hilfsfunktionen wie MapState, MapMutations, MapActions und MapGetters zu und verwenden Sie sie in der Komponente.

Fazit

In Vue sind Datenübertragung und Ereignisübertragung zwischen Komponenten sehr wichtige Themen. Für verschiedene Szenarien und Anforderungen können wir Props, $emit, Event Bus und Vuex verwenden, um Datenbereitstellung und Ereignisbereitstellung zu implementieren. Durch die Beherrschung dieser Fähigkeiten können wir unsere Vue-Anwendungen flexibler organisieren und verwalten.

Das obige ist der detaillierte Inhalt vonImplementierungsmethoden für Komponentendatenübertragung und Ereignisübertragung in der Vue-Dokumentation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!