En las lecciones anteriores, cuando aprendimos a crear nuestros propios componentes en Vue.js, nos dimos cuenta que necesitábamos una manera de hacer cambios en nuestro objeto principal de Vue (VM o View-Model) pero dentro del scope del componente. Yo resolví este problema usando $parent y dado que nuestro proyecto es muy pequeño, quizás no importe demasiado, pero para sistemas grandes esto se considera una mala práctica, y hay una mejor forma de solucionar este problema dentro de Vue, y es creando y disparando eventos personalizados como aprenderemos en esta lección.

Repositorio

Ver el código de esta lección en GitHub

Notas

  • En la documentación de Vue.js nos explican que cada componente tiene su propio scope.
  • Usando $dispatch() podemos despachar un evento para que se propague y con el cual la instancia de Vue.js (el objeto VM) puede interactuar. Este método recibe como argumentos el nombre del evento a despachar y los argumentos del evento.
  • Se puede usar la directiva v-on para llamar a los eventos explícitamente desde la vista, de esta manera podemos hacer más claro qué método se va a ejecutar cuando se dispare el evento y podemos incluso asignar métodos diferentes cada vez que usemos el componente.

Material relacionado

Únete a nuestra comunidad en Discord y comparte con los usuarios y autores de Styde, 100% gratis.

Únete hoy

Regístrate hoy en Styde y obtén acceso a todo nuestro contenido.

Lección anterior Animaciones (o transiciones) en Vue.js Lección siguiente Organizando nuestro módulo de notas con Browserify, Vueify, Gulp y Laravel Elixir