Quelles sont les méthodes de transfert de données pour la communication des composants Vue ?

Quelles sont les méthodes de transfert de données pour la communication des composants Vue ?

Dans le développement de Vue, la communication entre les composants est un élément très important. Grâce à la communication entre les composants, le transfert de données et l'interaction entre les différents composants peuvent être réalisés. Vue fournit une variété de façons d'implémenter la communication entre composants, notamment les accessoires, l'émission, la fourniture/l'injection, Vuex, etc. Cet article explique ces différentes méthodes de transfert de données et fournit des exemples de code correspondants.

1. props et $emit

props sont utilisés par le composant parent pour transmettre des données au composant enfant, et le composant enfant reçoit les données transmises via les accessoires. $emit est utilisé par le composant enfant pour transmettre des données au composant parent. Le composant enfant déclenche des événements et transmet des données au composant parent via $emit. T & lt; modèle & gt;

& lt; div & gt;

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

e
& lt;/div & lt;/test & lt; export default {

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

}
984f708c76b92d46312d6e594d7b7aea
dc6dce4a544fdca2df29d5ac0ea9906b

message: 'Hello World!'

d4e6ef3935d870d31c81823c096b9b03
21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a
importer ChildComponent depuis './ChildComponent'

importer { mapGetters, mapActions } depuis 'vuex'

3. export par défaut {

getMessage: state => state.message

}

2cacc6d41bbb37262a98f745aa00fbf0

// ChildComponent.vue
d477f9ce7bf77f53fbcf36bec1b69b7a
dc6dce4a544fdca2df29d5ac0ea9906b

updateMessage(state, newMessage) {
  state.message = newMessage
}

16b28748ea4df4d9c2150843fecfba68

21c97d3a051048b8e55e3c8f199a54b2

3f1c4e4b6b16bbbd69b2ee476dc4f83a

import { mapGetters } from 'vuex'

export default {

changeMessage({ commit }, payload) {
  commit('updateMessage', payload)
}

}
2cacc6d41bbb37262a98f745aa00fbf0

Vous trouverez ci-dessus plusieurs méthodes de transfert de données courantes pour la communication des composants Vue. Chaque méthode a ses propres scénarios applicables. Choisissez la méthode appropriée pour le transfert de données en fonction des besoins réels. En utilisant rationnellement ces méthodes, une communication flexible et efficace entre les composants peut être obtenue, améliorant ainsi l'efficacité du développement et la qualité du code.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!