J'ai lu des articles sur v-model , mais jusqu'à présent, les didacticiels ont prêté à confusion et ne répondent pas vraiment à ma question: comment obtenir des liaisons de données bidirectionnelles avec modèle v ?
J'ai besoin de lier une variable de données à un composant enfant et de pouvoir modifier la valeur de la variable à la fois du côté parent et du côté enfant. Quel code dois-je mettre dans le composant enfant pour que lorsque je fais , je peux mettre à jour var des deux côtés?
À cette fin, je préférerais éviter le modèle de magasin car ce ne sont que deux composants qui doivent partager les données.
3 Réponses :
v-model n'est qu'une abstraction au-dessus d'un flux de données unidirectionnel. Essentiellement, votre composant enfant personnalisé doit faire deux choses:
valeur . input avec de nouvelles données. Donc, votre composant enfant serait utilisé comme ceci:
<child-component v-model="myVal"></child-component>
Dans le code ci-dessus, $ event est un modèle spécial construction qui contient les données émises par le composant enfant dans le cadre de la charge utile de l'événement. L'événement @input met simplement à jour la valeur myVal qui sera à nouveau transmise à un composant enfant via la liaison : value et donc un flux de données à sens unique .
Maintenant, ce modèle est répété tellement de fois que Vue.js a fourni un simple v-model syntax-sugar qui peut être utilisé à la place du code ci-dessus. p>
<child-component :value="myVal" @input="myVal = $event"></child-component>
De plus, si pour une raison quelconque, vous ne souhaitez pas utiliser value ou input comme accessoire et événement, vous pouvez ensuite les modifier à l'aide de l'attribut model . Voici la documentation supplémentaire pour cela a >.
Notez que, si vous utilisez Redux / Vuex, évitez d'utiliser v-model . Pour les données imbriquées, il y a de fortes chances que vous vous retrouviez dans des scénarios extrêmes.
Avez-vous un exemple? L'explication ci-dessus est mentionnée ainsi peut-être des fois, mais je n'ai pas encore vu d'exemple qui met le concept ci-dessus en action (par exemple, modifier le même tableau en parent et en enfant)
Je pense que ce codepen devrait aider: codepen.io/fuxy22/pen/OWKdzY
@ tyteen4a03, Pour array, assurez-vous de ne pas utiliser de méthodes mutables comme push / splice / shift, etc. Utilisez des méthodes immuables comme concat , slice et émettez toujours un nouveau tableau à partir de l'enfant composant.
Il n'est pas possible d'utiliser v-model pour la liaison de données bidirectionnelle car vous souhaitez modifier le comportement par défaut lorsque vous modifiez l'entrée dans le composant enfant.
Vous souhaitez utiliser v-bind pour afficher la valeur et v-on: input pour renvoyer les données au composant parent.
Voir https://codesandbox.io/s/rj76y5w02o par exemple.
La première ligne est juste un texte en lecture seule. Sélectionnez la liste déroulante est le mutateur de données côté parent et la zone de texte provient du composant enfant.
Fondamentalement, vous voulez que les données soient conservées du côté parent et les transmettent au composant enfant avec des accessoires. Dans le composant enfant, vous souhaitez renvoyer l'événement d'entrée au parent pour qu'il le traite avec $ emit .
La modification de la valeur avec le menu déroulant parent mettra à jour la valeur. La modification de la valeur à partir de l'entrée de texte du composant enfant le sera également. Si vous saisissez un , deux ou trois , la liste déroulante de sélection des parents sera également mise à jour en conséquence.
Pour vous, vous pouvez utiliser le modificateur .sync .
https://vuejs.org/v2/guide/components- custom-events.html # sync-Modifier