Vue.js
Composants personnalisés avec v-model
Recherche…
Introduction
Souvent, nous devons créer des composants qui effectuent des actions / opérations sur des données et nous en avons besoin dans le composant parent. La plupart du temps, la vuex serait une meilleure solution, mais dans les cas où le comportement du composant enfant n'a rien à voir avec l'état de l'application, par exemple: un curseur de plage, un sélecteur de date / heure, un lecteur de fichier
Les magasins individuels pour chaque composant à chaque utilisation deviennent compliqués.
Remarques
Pour avoir v-model sur un composant, vous devez remplir deux conditions.
- Il devrait avoir un accessoire nommé "value"
- Il doit émettre un événement d'
inputavec la valeur attendue par les composants parents.
<component v-model='something'></component>
est juste du sucre syntaxique pour
<component
:value="something"
@input="something = $event.target.value"
>
</component>
v-model sur un composant de compteur
Ici counter est un composant enfant accessible par la demo qui est un composant parent utilisant v-model .
// child component
Vue.component('counter', {
template: `<div><button @click='add'>+1</button>
<button @click='sub'>-1</button>
<div>this is inside the child component: {{ result }}</div></div>`,
data () {
return {
result: 0
}
},
props: ['value'],
methods: {
emitResult () {
this.$emit('input', this.result)
},
add () {
this.result += 1
this.emitResult()
},
sub () {
this.result -= 1
this.emitResult()
}
}
})
Ce composant enfant émettra un result chaque fois que les méthodes sub() ou add() seront appelées.
// parent component
new Vue({
el: '#demo',
data () {
return {
resultFromChild: null
}
}
})
// parent template
<div id='demo'>
<counter v-model='resultFromChild'></counter>
This is in parent component {{ resultFromChild }}
</div>
Comme v-model est présent sur le composant enfant, un prop avec la value name a été envoyé en même temps, il y a un événement d'entrée sur le counter qui à son tour fournira la valeur du composant enfant.
