J'ai une application VUE et je charge différents composants enfants basés sur les valeurs sélectionnées parmi les composants parent. Lorsque je clique sur le bouton Soumettre qui est dans le composant parent, je souhaite obtenir toutes les valeurs de composant enfant dans le parent.
<template> <div> <v-select v-model="category"/> <firstComponent v-show="category == 1"> <secondComponent v-show="category == 2"> <v-btn @click="submitData">Submit</v-btn> </div></template>
4 Réponses :
Vous pouvez utiliser des emplacements scopés pour cela, quelque chose comme l'intérieur Vous avez maintenant accès à des données partagées, vous pouvez fournir cela à votre fonction de soumission. . firstComponent :
Veuillez suivre ceci pour référence. Déjà répondu ici. Stackoverflow.com/questions/58991899/...
Concept de Vuejs Peut accéder à des composants enfants via le composant VUEJS, mais il est gênant. La suggestion est usuée 1. Eventbus https://alligator.io/vuejs/global-event-bus/ (essayez d'éviter d'utiliser cela car il est difficile de suivre où votre événement doit avoir besoin d'écouter et d'appeler lorsque votre code avant est de faire des centaines de fichiers) 2. VUEX qui est plus appropriée pour le but de développement Web de Vuejs
Il existe différentes manières disponibles pour le partage de données dans Vue. Vous pouvez utiliser Serverbus, VUEX ou en cas de relation entre enfants, vous pouvez simplement émettre les données de l'enfant à l'événement.
Pour votre cas spécifique, je vous suggère d'avoir un objet / une matrice dans le composant parent qui serait transmis comme un accessoire à tous les composants de l'enfant, puis les valeurs de formulaire liées aux touches de l'objet. Étant donné que les matrices / objets sont passés par référence, la valeur modifiée serait directement disponible dans le composant parent. Cependant, si vous êtes à l'aise avec VUEX, optez pour la même chose.
En outre, je sens que vous devriez utiliser des composants dynamiques pour rendre votre composant lorsque votre catégorie change de changement sinon que vous auriez un certain nombre de V-show ou V-si dans votre code lorsque les composants augmenteraient. ( https://vuejs.org/v2/guide/components-dynamic-async .html )
<template> <child ref="children"> </template> this.$refs.children.anything https://vuejs.org/v2/guide/components-edge-cases.html#Accessing-Child-Component-Instances-amp-Child-Elements
Avez-vous regardé dans
VUEX ?Utilisez $ EMIT Evénement personnalisé pour obtenir des données sur les enfants dans le composant parent.