Vue.js
Komponenty niestandardowe z modelem v
Szukaj…
Wprowadzenie
Często musimy tworzyć pewne komponenty, które wykonują pewne działania / operacje na danych i wymagamy tego w komponencie nadrzędnym. W większości przypadków vuex byłoby lepszym rozwiązaniem, ale w przypadkach, w których zachowanie komponentu potomnego nie ma nic wspólnego ze stanem aplikacji, na przykład: suwak zakresu, selektor daty / godziny, czytnik plików
Posiadanie osobnych sklepów dla każdego komponentu za każdym razem, gdy się zużywa, staje się skomplikowane.
Uwagi
Aby mieć v-model na komponencie, musisz spełnić dwa warunki.
- Powinien mieć rekwizyt o nazwie „wartość”
- Powinien on emitować zdarzenie
inputo wartości oczekiwanej przez komponenty nadrzędne.
<component v-model='something'></component>
jest po prostu cukrem syntaktycznym
<component
:value="something"
@input="something = $event.target.value"
>
</component>
Model v na komponencie licznika
Tutaj counter jest komponentem potomnym dostępnym przez demo który jest komponentem nadrzędnym przy użyciu 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()
}
}
})
Ten komponent potomny będzie emitował result każdym razem, gdy zostaną wywołane metody sub() lub add() .
// 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>
Ponieważ v-model jest obecny na komponencie potomnym, rekwizyt o value nazwy został wysłany w tym samym czasie, w counter znajduje się zdarzenie wejściowe, które z kolei poda wartość z komponentu potomnego.
