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
- Introducción a los componente en Vue.js
- Repaso de creación y uso de componentes en Vue.js
- Métodos y manejo de eventos con v-on:click y submit
- Uso del componente Vue Resource
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