web-dev-qa-db-fra.com

Comment partager des données entre les composants de VueJS

J'ai une application VueJS assez simple, 3 composants (Login, SelectSomething, DoStuff)

Le composant de connexion est juste un formulaire pour l'utilisateur et passe l'entrée tandis que le deuxième composant doit afficher certaines données obtenues dans la progression de la connexion.

Comment partager les données d'un composant avec les autres? De sorte que lorsque j'achemine vers le deuxième composant, j'ai toujours les données obtenues dans celui de connexion?

vue-componentvue-routervue.jsvuejs2
24
daniels

Vous pouvez utiliser props ou un bus d'événements, où vous pourrez émettre un événement à partir d'un composant et écouter sur un autre

vm.$on('test', function (msg) {
  console.log(msg)
})

vm.$emit('test', 'hi')
// -> "hi"
19
highFlyingSmurfs

Dans Vue.js, les composants peuvent communiquer entre eux en utilisant props ou events . Tout dépend de la relation entre vos composants.

Prenons ce petit exemple:

<template>
<h2>Parent Component</h2>
<child-component></child-component>
</template>

Pour envoyer des informations du parent à l'enfant, vous devrez utiliser des accessoires:

<template>
<h2>Parent Component</h2>
<child-component :propsName="example"></child-component>
</template>

<script>
export default {
 data(){
  return{
   example: 'Send this variable to the child'
  }
 }
}
</script>

Pour envoyer des informations de l'enfant au parent, vous devrez utiliser des événements:

Composant enfant

<script>
 ...
 this.$emit('example', this.variable);
</script>

Composant parent

<template>
<h2>Parent Component</h2>
<child-component @example="methodName"></child-component>
</template>

<script>
export default {
 methods: {
  methodName(variable){
   ...
  }
 }
}
</script>

Consultez la documentation de vue.js pour plus d'informations à ce sujet. Ceci est une très brève introduction.

9
Jad Rizk

Utilisez ce petit plugin si vous avez beaucoup de composants imbriqués:

Vue.use(VueGlobalVariable, {
  globals: {
    user: new User('user1'),
    obj:{},
    config:Config,
    ....
  },
});

Vous pouvez maintenant utiliser $user dans n'importe quel composant sans utiliser d'accessoires ou autres

5
mudin