Vue.js
Componenti personalizzati con v-model
Ricerca…
introduzione
Spesso dobbiamo creare alcuni componenti che eseguono alcune azioni / operazioni sui dati e ne richiediamo nel componente principale. La maggior parte delle volte vuex sarebbe una soluzione migliore, ma nei casi in cui il comportamento del componente figlio non ha nulla a che fare con lo stato dell'applicazione, ad esempio: un dispositivo di scorrimento intervallo, data / ora, lettore di file
Avere singoli negozi per ogni componente ogni volta che vengono utilizzati diventa complicato.
Osservazioni
Per avere il v-model su un componente devi soddisfare due condizioni.
- Dovrebbe avere un sostegno chiamato "valore"
- Dovrebbe emettere un evento di
inputcon il valore previsto dai componenti principali.
<component v-model='something'></component>
è solo zucchero sintattico per
<component
:value="something"
@input="something = $event.target.value"
>
</component>
v-model su un contatore
Qui counter è un componente figlio a cui si accede tramite demo che è un componente principale che utilizza 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()
}
}
})
Questo componente figlio emetterà il result ogni volta che vengono chiamati i metodi sub() o 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>
Dato che v-model è presente sul componente figlio, è stata inviata una puntello con value nome allo stesso tempo, c'è un evento di input sul counter che a sua volta fornisce il valore dal componente figlio.
