Comment partager les données entre les composants de VueJS
j'ai une application VueJS assez simple, 3 components (Login, SelectSomething, DoStuff)
Login component est juste un formulaire pour l'utilisateur et passer l'entrée tandis que le second component doit afficher quelques données obtenues dans la progression de login.
Comment puis-je partager des données d'un composant aux autres? De sorte que lorsque j'achemine vers le deuxième composant j'ai toujours les données obtenues dans le Login one?
2 réponses
Vous pouvez utiliser accessoires ou un bus d'événement, 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"
Dans La Vue.les composants js peuvent communiquer entre eux en utilisant accessoires ou événements. Tout dépend de la relation entre vos composants.
prenons cet exemple:
<template>
<h2>Parent Component</h2>
<child-component></child-component>
</template>
pour envoyer des informations du parent à L'enfant, vous aurez besoin d'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 events:
Composante Enfant
<script>
...
this.$emit('example', this.variable);
</script>
Parent Composante
<template>
<h2>Parent Component</h2>
<child-component @example="methodName"></child-component>
</template>
<script>
export default {
methods: {
methodName(variable){
...
}
}
}
</script>
Vérifiez la documentation de vue.js pour plus d'informations sur ce sujet. C'est une très brève introduction.