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
  }
}

}

provide/inject

provide et inject sont une paire d'options pour transmettre des données entre des composants hiérarchiques. Ceci est réalisé en fournissant des données via des composants parents et en injectant des données dans. composants enfants. L'option provide fournit des données et l'option inject injecte des données. T & lt; modèle & gt;

& lt; div & gt;

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

e

& lt;/div & lt;

& lt;/test & gt; '

export default {

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

}

Vuex

Vuex est le modèle de gestion d'état officiellement fourni par Vue, qui est utilisé pour gérer de manière centralisée les données partagées entre les composants. Le transfert de données et l'interaction entre les composants sont réalisés via l'état, les getters, les mutations, les actions, etc. de Vuex.

2. // store.js
importer Vue depuis 'vue'

importer Vuex depuis 'vuex'

Vue.use(Vuex)

exporter par défaut le nouveau Vuex.Store({

état : {

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

},

getters : {

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

},

mutations : {

<p>子组件注入数据：{{message}}</p>

},

actions : {

inject: ['message']

}

})

// ParentComponent.vue

<script><br> importer ChildComponent depuis './ChildComponent'</p> importer { mapGetters, mapActions } depuis 'vuex'<ol start="3"><li>export par défaut {</li><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>getMessage: state =&gt; state.message</pre><div class="contentsignin">Copier après la connexion</div></div></ol>}<p></script>

// ChildComponent.vue

<script></p> import { mapGetters } from 'vuex'<p><br>export default { </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>changeMessage({ commit }, payload) { commit('updateMessage', payload) }</pre><div class="contentsignin">Copier après la connexion</div></div></p> <p>}<br></script>

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!