Vue.js
Componentes personalizados con v-modelo
Buscar..
Introducción
Muchas veces tenemos que crear algunos componentes que realizan algunas acciones / operaciones en los datos y requerimos eso en el componente principal. La mayoría de las veces, vuex sería una mejor solución, pero en los casos en que el comportamiento del componente secundario no tiene nada que ver con el estado de la aplicación, por ejemplo: un control deslizante de rango, selector de fecha / hora, lector de archivos
Tener tiendas individuales para cada componente cada vez que se usan se complica.
Observaciones
Para tener v-model en un componente, debe cumplir dos condiciones.
- Debe tener un prop llamado 'valor'
- Debe emitir un evento de
inputcon el valor esperado por los componentes principales.
<component v-model='something'></component>
es solo azúcar sintáctica para
<component
:value="something"
@input="something = $event.target.value"
>
</component>
v-modelo en un componente contador
Aquí el counter es un componente secundario al que se accede mediante una demo que es un componente principal que usa 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()
}
}
})
Este componente hijo emitirá result cada vez que se llamen los métodos 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>
Dado que v-model está presente en el componente secundario, al mismo tiempo se envió un prop con value nombre, hay un evento de entrada en el counter que, a su vez, proporcionará el valor del componente secundario.
