vuejs mise à jour de données parent de l'enfant composant
Je commence à jouer avec vuejs (2.0).
J'ai construit une page simple avec un composant en elle.
La page a une Vue d'instance avec des données.
Sur cette page, j'ai enregistré et ajouté le composant html.
Le composant a une input[type=text]
. Je veux que la valeur de réfléchir sur le parent (principale Vue de l'instance).
Comment puis-je mettre à jour correctement le composant parent de données?
En passant d'un bond prop de la mère n'est pas bon et jette quelques avertissements à la console. Ils ont quelque chose dans leur doc, mais il ne fonctionne pas.
- Pouvez-vous ajouter le code que vous avez essayé, ce qui n'est pas de travail.
- Double Possible de Comment puis-je partager des données entre non parent-enfant composants en Vue
Vous devez vous connecter pour publier un commentaire.
Liaison bidirectionnelle a été déprécié en Vue 2.0 en faveur de l'utilisation d'un event-driven architecture. En général, un enfant ne devrait pas muter ses accessoires. Il devrait plutôt
$émettent
événements et de laisser les parents de réagir à ces événements.Dans votre cas particulier, vous pouvez utiliser un composant personnalisé avec
v-model
. C'est une syntaxe particulière qui permet à quelque chose de proche de à deux voies de liaison, mais est en fait un raccourci pour l'event-driven architecture décrite ci-dessus. Vous pouvez lire à ce sujet ici -> https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events.Voici un exemple simple:
JS:
HTML:
Les docs de l'état qui
est équivalent à
C'est pourquoi l'hélice sur l'enfant doit être nommé de la valeur, et pourquoi l'enfant a besoin de $émettent un événement nommé
input
.undefined
jusqu'au premier changement. Voir ce violon où j'ai commentéprops: ['value']
. Remarquez comment la valeur initiale estundefined
, au lieu dehello
: jsfiddle.net/asemahle/8Lrkfxj6. Après le premier changement, Vue ajoute dynamiquement une valeur prop pour le composant, de sorte qu'il fonctionne.input
élément dans le modèle) lui-même se lie directement à la de très de données qui a été liée à lavalue
propriété du composant:<input v-bind:value="value">
(donc quand leinput
est modifié par un utilisateur, il serait de modifier le parentprice
directement les données, il semble). La conception, il ne semble pas utiliser un composant spécifique de la variable pour sesinput
, que votre exemple ne... suis-je le droit?v-model
moins élégant que la Vue docs. J'ai mis à jour l'exemple de code pour être plus en ligne avec la Vue de la documentation.value
de l'enfant. Cela signifie que levalue
hélice sur l'enfant va correspondre à ce qui est sur le parent. L'enfant ne lit que cette valeur, jamais les mises à jour directement. Lorsque l'utilisateur écrit le texte, l'enfant émet un événement avec la valeur la plus récente (méthodeupdateValue
). En réponse à cet événement parent mises à jourvalue
. À son tour, ce qui provoque levalue
hélice sur l'enfant à être mis à jour.<custom-input v-bind:value="something" v-on:input="something = arguments[0]"></custom-input>
et il fonctionne.De la la documentation:
Comment passer des accessoires
Voici le code à passer des accessoires à un élément d'enfant:
Comment émettent de l'événement
HTML:
JS:
En composant enfant:
this.$emit('eventname', this.variable)
En composant parent:
Je suis d'accord avec l'événement d'émission et de v-modèle de réponses pour ceux ci-dessus. Cependant, j'ai pensé que je poste ce que j'ai trouvé sur les composants avec de multiples éléments de formulaire qui veulent émettre le dos de leurs parents, puisque cela semble être l'un des premiers articles retournés par google.
Je sais que la question spécifie une seule entrée, mais cela semblait la plus proche et d'en sauver les gens un peu de temps avec similaires vue des composants. Aussi, personne n'a mentionné le
.sync
modificateur encore.Autant que je sache, le
v-model
solution est seulement adapté pour une entrée de retourner à leurs parents. J'ai pris un peu de temps à la recherche pour elle, mais à Vue (2.3.0) documentation ne montrons comment synchroniser plusieurs accessoires envoyé dans le composant à la maison mère (via émettent bien sûr).C'est à juste titre appelé le
.sync
modificateur.Voici ce que le la documentation dit:
Vous pouvez également synchroniser plusieurs à la fois, par l'envoi par l'intermédiaire d'un objet. Découvrez la la documentation ici
Composant Enfant
Utilisation
this.$emit('event_name')
pour envoyer un événement pour le composant parent.Composant Parent
Pour écouter l'événement dans le composant parent, nous ne
v-on:event_name
et une méthode (ex. handleChange
) que nous voulons exécuter sur l'événementFait 🙂
Il est également possible de passer des accessoires en tant qu'Objet ou un Tableau. Dans ce cas, les données seront les deux sens lié:
(Ce qui est noté à la fin de la rubrique: https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow )
JS:
HTML:
La manière la plus simple est d'utiliser
this.$emit
Père.vue
Enfant.vue
Mon exemple complet: https://codesandbox.io/s/update-parent-property-ufj4b