Vue.js
Aangepaste componenten met v-model
Zoeken…
Invoering
Vaak moeten we enkele componenten maken die enkele acties / bewerkingen op gegevens uitvoeren en dat vereisen we in de bovenliggende component. Meestal zou vuex een betere oplossing zijn, maar in gevallen waarin het gedrag van de onderliggende component niets te maken heeft met de applicatiestatus, bijvoorbeeld: een bereikschuifregelaar, datum / tijdkiezer, bestandslezer
Het is ingewikkeld om voor elke component afzonderlijke winkels te hebben.
Opmerkingen
Om een v-model op een component te hebben, moet u aan twee voorwaarden voldoen.
- Het moet een prop hebben die 'waarde' heet
- Het moet een
inputuitzenden met de waarde die wordt verwacht door de bovenliggende componenten.
<component v-model='something'></component>
is gewoon syntactische suiker voor
<component
:value="something"
@input="something = $event.target.value"
>
</component>
v-model op een tegencomponent
Hier is de counter een onderliggend onderdeel dat toegankelijk is via een demo , een bovenliggend onderdeel dat het 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()
}
}
})
Deze onderliggende component zendt result telkens wanneer methoden sub() of add() worden aangeroepen.
// 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>
Aangezien v-model aanwezig op het kind component, een prop met name value gestuurd op hetzelfde moment is er een invoergebeurtenis op de counter die op hun beurt over een waarde uit de kindercomponent.
