Welche Datenübertragungsmethoden gibt es für die Vue-Komponentenkommunikation?

Welche Datenübertragungsmethoden gibt es für die Vue-Komponentenkommunikation?

In der Vue-Entwicklung ist die Komponentenkommunikation ein sehr wichtiger Teil. Durch Komponentenkommunikation können Datenübertragung und Interaktion zwischen verschiedenen Komponenten erreicht werden. Vue bietet eine Vielzahl von Möglichkeiten zur Implementierung der Komponentenkommunikation, einschließlich Requisiten, Emittieren, Bereitstellen/Injizieren, Vuex usw. In diesem Artikel werden diese verschiedenen Datenübertragungsmethoden erläutert und entsprechende Codebeispiele bereitgestellt.

1. props und $emit

props werden von der übergeordneten Komponente verwendet, um Daten an die untergeordnete Komponente zu übergeben, und die untergeordnete Komponente empfängt die übergebenen Daten über props. $emit wird von der untergeordneten Komponente verwendet, um Daten an die übergeordnete Komponente zu übergeben. Die untergeordnete Komponente löst Ereignisse aus und übergibt Daten über $emit an die übergeordnete Komponente. T & lt; div & gt; '

export default {

<child-component :message="message" @update="updateMessage"></child-component>
<p>父组件收到子组件传递过来的数据：{{message}}</p>

}

provide/inject

provide und inject sind zwei Optionen zum Weitergeben von Daten über hierarchische Komponenten hinweg. Dies wird durch die Bereitstellung von Daten über übergeordnete Komponenten und erreicht Daten in untergeordnete Komponenten einfügen. Die Option „Bereitstellen“ stellt Daten bereit und die Option „Injizieren“ fügt Daten ein. T & lt; div & gt; '

export default {

components: {
  ChildComponent
},
data() {
  return {
    message: ''
  }
},
methods: {
  updateMessage(newMessage) {
    this.message = newMessage
  }
}

}

Vuex

Vuex ist das offiziell von Vue bereitgestellte Zustandsverwaltungsmodell, das zur zentralen Verwaltung von zwischen Komponenten gemeinsam genutzten Daten verwendet wird. Datenübertragung und Interaktion zwischen Komponenten werden durch den Zustand, Getter, Mutationen, Aktionen usw. von Vuex realisiert.

// store.js

Vue aus 'vue' importieren
Vuex aus 'vuex' importieren

Vue.use(Vuex)
standardmäßiges neues Vuex.Store({

Status: {

<input type="text" v-model="message" />
<button @click="sendMessage">传递数据给父组件</button>

},

Getter : {

data() {
  return {
    message: ''
  }
},
methods: {
  sendMessage() {
    this.$emit('update', this.message)
  }
}

},

Mutationen: {

<p>父组件提供数据：{{message}}</p>
<child-component></child-component>

},

Aktionen: {

components: {
  ChildComponent
},
provide() {
  return {
    message: 'Hello World!'
  }
}

}

})

// ParentComponent.vue