Je commence à jouer avec vuejs (2.0). J'ai construit une page simple avec un composant. La page a une instance Vue avec des données. Sur cette page, je me suis inscrit et j'ai ajouté le composant au html. Le composant en a un input[type=text]
. Je veux que cette valeur se reflète sur le parent (instance principale de Vue).
Comment mettre à jour correctement les données parent du composant? Passer un accessoire lié du parent n'est pas bon et jette quelques avertissements à la console. Ils ont quelque chose dans leur doc mais cela ne fonctionne pas.
javascript
vue.js
vue-component
Gal Ziv
la source
la source
Réponses:
La liaison bidirectionnelle est obsolète dans Vue 2.0 au profit d'une architecture plus orientée événement. En général, un enfant ne doit pas muter ses accessoires. Au contraire, il devrait les
$emit
événements et laisser le parent répondre à ces événements.Dans votre cas spécifique, vous pouvez utiliser un composant personnalisé avec
v-model
. C'est une syntaxe spéciale qui permet quelque chose de proche de la liaison bidirectionnelle, mais qui est en fait un raccourci pour l'architecture événementielle décrite ci-dessus. Vous pouvez en savoir plus ici -> https://vuejs.org/v2/guide/components.html#Form-Input-Components-using-Custom-Events .Voici un exemple simple:
Les documents indiquent que
est équivalent à
C'est pourquoi le prop sur l'enfant doit être nommé value, et pourquoi l'enfant doit $ émettre un événement nommé
input
.la source
undefined
jusqu'au premier changement. Voir ce violon où j'ai commentéprops: ['value']
. Notez comment la valeur initiale estundefined
, au lieu dehello
: jsfiddle.net/asemahle/8Lrkfxj6 . Après le premier changement, Vue ajoute dynamiquement un accessoire de valeur au composant, donc cela fonctionne.De la documentation :
Comment passer des accessoires
Voici le code pour passer des accessoires à un élément enfant:
Comment émettre un événement
HTML:
JS:
la source
Dans le composant enfant:
Dans le composant parent:
la source
Composant enfant
Permet
this.$emit('event_name')
d'envoyer un événement au composant parent.Composant parent
Afin d'écouter cet événement dans le composant parent, nous faisons
v-on:event_name
et une méthode (ex. handleChange
) que nous voulons exécuter sur cet événement se produitTerminé :)
la source
Je suis d'accord avec l'émission d'événements et les réponses du modèle v pour ceux ci-dessus. Cependant, j'ai pensé publier ce que j'ai trouvé sur les composants avec plusieurs éléments de formulaire qui veulent être renvoyés à leur parent, car cela semble l'un des premiers articles renvoyés par Google.
Je sais que la question spécifie une seule entrée, mais cela semblait la correspondance la plus proche et pourrait faire gagner du temps aux gens avec des composants de vue similaires. De plus, personne n'a encore mentionné le
.sync
modificateur.Autant que je sache, la
v-model
solution n'est adaptée qu'à une seule entrée retournant à leur parent. J'ai mis un peu de temps à le chercher, mais la documentation de Vue (2.3.0) montre comment synchroniser plusieurs accessoires envoyés dans le composant au parent (via emit bien sûr).Il est appelé à
.sync
juste titre le modificateur.Voici ce que dit la documentation :
Vous pouvez également synchroniser plusieurs à la fois en envoyant via un objet. Consultez la documentation ici
la source
Le moyen le plus simple est d'utiliser
this.$emit
Père.vue
Enfant.vue
Mon exemple complet: https://codesandbox.io/s/update-parent-property-ufj4b
la source
Il est également possible de passer des accessoires en tant qu'objet ou tableau. Dans ce cas, les données seront liées dans les deux sens:
(Ceci est noté à la fin du sujet: https://vuejs.org/v2/guide/components.html#One-Way-Data-Flow )
la source
La méthode correcte consiste à
$emit()
utiliser un événement dans le composant enfant que l'instance principale de Vue écoute .la source
1) Child Compnent: vous pouvez utiliser comme ceci dans l'écriture de composant enfant comme ceci: this.formValue est d'envoyer des données au composant parent
2) Parrent Compnenet: et dans la balise de composant parrent, recevez une variable comme celle-ci: et c'est le code pour recevoir les données de cet enfant dans la balise de composant parent
la source
Une autre façon est de passer une référence de votre setter du parent comme accessoire au composant enfant, comme ils le font dans React. Dites, vous avez une méthode
updateValue
sur le parent de mettre à jour la valeur, vous pouvez instancier le composant enfant comme ceci:<child :updateValue="updateValue"></child>
. Ensuite , sur l'enfant , vous aurez un accessoire correspondant:props: {updateValue: Function}
et dans le modèle appeler la méthode lorsque l'entrée change:<input @input="updateValue($event.target.value)">
.la source
Je ne sais pas pourquoi, mais je viens de mettre à jour avec succès les données parentales en utilisant les données comme objet,
:set
&computed
Parent.vue
Enfant.vue
la source
son exemple vous dira comment transmettre la valeur d'entrée au parent sur le bouton d'envoi.
Définissez d'abord eventBus en tant que nouveau Vue.
la source
Je pense que cela fera l'affaire:
@change="$emit(variable)"
la source