J'ai essayé d'apprendre comment le v-model de Vue fonctionne avec une entrée personnalisée et également des composants d'entrée réguliers.
J'ai vu des exemples où v-model est lié à une valeur dans le composant et également dans le modèle et ces deux valeurs seront différentes. Je trouve cela très déroutant et je pense que c'est peut-être un malentendu de la "liaison bidirectionnelle". Comment avez-vous une entrée liée à deux valeurs.
Exemple:
// modèle v dans le modèle
<my-custom-input v-model="someOtherObj.str">
// v-model dans le composant
const myCustomInput = ('my-custom-input', {
data() {
return {
myObj: 'hello'
}
},
template: `<input v-model="myObj" >`
});
J'ai vu des exemples de deux modèles en v comme celui-ci avec des valeurs différentes définies au niveau du modèle et du composant.
Cependant, en regardant ce message SO , la réponse de @asemahle semble beaucoup plus logique. De plus, la documentation officielle de Vue n'a même pas 2 modèles v séparés sur le modèle et les bases du composant Vue JS
Dans ces derniers exemples, cela semble beaucoup plus logique car il n'y a qu'un seul modèle v défini et lié au composant d'entrée plutôt que deux.
Le premier exemple est-il incorrect? Et si ce n'est pas le cas, quelqu'un peut-il expliquer plus clairement comment cela fonctionne. Je n'arrive pas à trouver de vrais bons documents sur le fait d'avoir deux v-models séparés pour une entrée.
3 Réponses :
La liaison bidirectionnelle fait référence à la liaison du modèle html à un seul objet. Dans votre exemple, vous essayez de le lier à deux valeurs distinctes comme vous l'avez indiqué, ce qui est simplement une mauvaise compréhension du terme de liaison bidirectionnelle.
Dans la liaison bidirectionnelle, vous n'allez toujours lier qu'un seul modèle v à un élément de données. La partie «bidirectionnelle» fait référence au fait qu'une fois que le v-model est lié à une propriété de données lorsque vous tapez dans la zone de texte, la propriété de données change également. ÉGALEMENT si vous modifiez la propriété de données, peut-être via une méthode ou Appel d'API, la zone de texte reflétera également ce changement de données, d'où la liaison de données bidirectionnelle.
oui, c'est ce que je pensais aussi, mais j'ai vu trop d'exemples en ligne avec deux v-models définis
Envie de partager un exemple? Peut-être que je peux voir où va le message. Si vous aviez un modèle v lié à deux propriétés de données distinctes, que montrerait une zone de texte si ces deux propriétés de données contenaient des données? Cela les concaténerait-il? Si tel est le cas, que se passerait-il si vous tapiez dans une zone de texte liée à deux propriétés de données, les deux propriétés de données répliqueraient la zone de texte.
Dans l'exemple de code que vous donnez, vous avez un composant dont le modèle inclut un v-model sur une entrée native:
template: `<input v-model="myObj" >`
Cela signifie que l' input est (bidirectionnelle) liée à myObj : les modifications apportées aux myObj de myObj seront myObj dans l'entrée, et les modifications apportées à l'entrée mettront à jour l'élément de données.
Vous avez alors une instance de ce composant avec un v-model dessus. Le composant recevra une value prop et devrait emit input événements d' input pour obtenir une liaison bidirectionnelle. v-model sur les composants est décrit ici .
Vous n'avez pas "une entrée liée à deux valeurs", mais vous pourriez avoir une liaison inutile, puisque les deux choses que vous liez sont (apparemment) sans rapport. Ce que vous voudrez peut - être, c'est que votre composant agisse comme un relais pour la valeur, afin que vous puissiez le traiter presque comme une input native. Cet exemple fait cela.
L' entrée personnalisée dans la documentation place un v-model en v-model sur le composant et utilise une liaison explicite pour la value et emit input partir de l'élément d' input natif. Vous pouvez les remplacer par un v-model en un calculable configurable, comme je l'ai fait dans l'exemple que j'ai lié dans le paragraphe ci-dessus. Le get rendement value et le set effectue le emit .
C'est à peu près ce que j'ai écrit. Je voulais juste confirmer si le fait d'avoir deux v-models est correct car je vois des exemples de cela partout sur les ressources Internet. Mais il semble que ce soit un malentendu dérivé de la "liaison bidirectionnelle"
Avoir n'importe quel nombre de v-models peut être correct, limité à un par entité qui prend une valeur.
qu'entendez-vous par avoir any number of v-models . Si vous voulez dire avoir plus d'un v-model pour le modèle et dans le composant, je pense que c'est faux et peut-être un malentendu de la liaison bidirectionnelle comme je l'ai indiqué dans l'op. J'ai créé un composant d'entrée personnalisé en suivant les documents officiels de Vue JS et cela semble très bien fonctionner. Il liera les propriétés des données quel que soit le composant dont il provient
Un composant peut contenir plusieurs entités ayant des liaisons v-model . Ils n'ont pas à être liés les uns aux autres. Agir en tant que pass-through est un cas d'utilisation spécial pour v-model , et il nécessite toujours qu'ils soient liés à différentes variables.
J'ai ajouté un dernier paragraphe à ma réponse pour expliquer le v-model comme un pass-through.
Essayez d'utiliser la watch dans le composant enfant
Parent:
<v-slide-group
v-model="selected"
@change="onSelect"
>
export default {
props: {
selectedValues: {
type: [Array, Number],
required: false,
default: -1
}
},
data () {
return {
selected: this.selectedValues
}
},
watch: {
selectedValues (selectedValues) {
this.selected = selectedValues
}
},
methods: {
onSelect (event) {
this.$emit('optionSelected', this.selected)
}
}
}
Enfant:
<OptionCarouselCards :selected-values="bevarageSelected" @optionSelected="getBeverage" />