¿Cómo usar v-model en un componente propio?

¿Se han preguntado como hacer uso de la directiva v-model en nuestros propios componentes?

autor Rodríguez Patiño, Eduardo
publicado
visitas 577

Cuando creamos nuestros propios componentes, muchas veces queremos interactuar con este a través de un v-model para que la interacción que se haga en este pueda reflejar sus cambios en la propiedad especificada como v-model.

Para poner en práctica este ejercicio, vamos a crear un componente que permita crear un colorpicker (paleta de colores de html5).

Colorpicker

La estructura de nuestro componente sin entrar en mucha complejidad sería la siguiente:

Vue.component('colorpicker', {
  props: {
    value: String
  },
  data: function () {
    return {
      color: this.value
    }
  },
  template: '<input type="color" v-model="color" />',
  watch: {
    color(value) {
        this.$emit('input', value);
    }
  }
});

¿Cómo funciona?

Hay que definir un parámetro de entrada para que nuestro componente reconozca el valor que pueda tener el atributo v-model al inicializar el componente.

props: {
    value: String
}

Dicho valor pasado lo reasignamos a una propiedad local, porque no podemos trabajar directamente con la propiedad pasada sino obtendremos el siguiente error: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value.

data: function () {
    return {
      // el valor de nuestra propiedad lo asignamos a la variable local color
      color: this.value
    }
}

Finalmente, a través de los watchers le decimos a nuestro componente que cuando la propiedad color haya mutado (cambiado de valor), emita un evento para que actualice el estado actual de nuestro v-model.

watch: {
  color(value) {
    this.$emit('input', value);
    }
}

¿Cómo usamos el componente con la directiva v-model?

La inicialización de nuestro componente quedaría de la siguiente manera.

<div id="app">
  <h2>Colorpicker:</h2>
   <p> Selected color: {{color}}</p>
   <colorpicker v-model="color" />
</div>

<script>
new Vue({ 
    el: "#app",
  data: {
    color: '#ff2929'
  }
});
</script>

Así nuestra propiedad color mutará ante cualquier cambio que haga nuestro componente hijo.

- Nuestros cursos -