Comunicación entre componentes en VUEjs - EventBus

VUEjs EventBus

Muchos me escriben en privado para conocer un poco las bases de los componentes en VUEjs, parece no haber mucho material de esto en la web y la documentación de VUE a veces parece ser un poco confusa…


Yo espero con este tutorial acercarlos aún mas a este mundo mientras preparo y grabo la nueva serie de VUEjs, esto se trata sobre la comunicación de componentes usando la técnica EventBus… Es sencilla pero muy funcional, ayuda mucho en aplicaciones de pequeño y mediano alcance. En ocasiones te encontrarás con la recomendación de que mejor es VUEx, y es verdad… Pero demos un paso hacia atrás y aprendamos un poco sobre EventBus.

En este tutorial usaremos vue-cli

Vue-CLI es una super herramienta para generar una estructura de carpetas inicial cuando vamos a abordar o desarrollar un proyecto VUEjs. CLI significa Command line interface o en español interfaz de línea de comandos, yo diría que es el php artisan de VUE.

NOTA: Debes contar con nodejs y npm instalado en tu equipo y actualizado.. Si no los tienes no te preocupes, desde https://nodejs.org/es/ puedes descargarlos y con un siguiente, siguiente, siguiente tenerlo instalado en tu computador.

Aquí crearemos un componente que tendrá una caja de texto y otro componente que listará cada elemento agregado por el componente uno. En otras palabras, enviaremos un dato del Componente A a Componente B.

Instalar vue-cli

Es muy sencillo, lo logramos con el comando npm install -g vue-cli

El -g significa que lo instalará de forma global y así podrás usarlo en este y cualquier proyecto futuro.

Comenzamos la creación del proyecto.

Desde el terminal, en la carpeta que desees vamos a ejecutar el comando vue init webpack cbc-vuejs

  • vue init es el comando
  • webpack es el tipo de proyecto
  • y cbc-vuejs es el nombre de mi proyecto, tu puedes colocar el nombre que mas te guste

Al ejecutar este comando hará una serie de preguntas. Responde no a todo, este proyecto es sencillo y no quiero complicarlo con librerías adicionales…

El concepto es comunicar componentes, no te preocupes mucho por el diseño.

? Project name cbc-vuejs
? Project description Tutorial on communication between components in VUEjs
? Author italomoralesf <i@italomoralesf.com>
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
❯ Yes, use NPM 
  Yes, use Yarn 
  No, I will handle that myself 

# Project initialization finished!
# ========================

To get started:

  cd cbc-vuejs
  npm run dev

Fíjate que solo coloco el nombre del proyecto, la descripción, el autor y al final (muy importante), construyo mi proyecto con npm. Esto nos crea la siguiente estructura de carpetas y archivos:

Estructura

README.md
build
config
index.html
node_modules
package.json
src
static

Genial, puede que veas muchas carpetas y eso confunda.. Solo aprende que debes enfocarte en la carpeta src y el archivo índex.html

Vamos con el código de cada archivo:

Archivo Index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        <title>Comunicación entre Componentes en VUEjs</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <div class="container">
            <div class="page-header">  			
                <h1>Comunicación de componentes <small>Tutorial</small></h1>
            </div>
            <div id="app"></div>  		
        </div>
    
        <!-- built files will be auto injected -->
    </body>
</html>

Nota que uso Bootstrap 3.3.7, no importa la verdad… Puedes usar el Framework CSS que gustes.

Archivo src/bus.js

import Vue from 'vue'
let bus = new Vue()
export default bus

Aquí está la clave, ¿Qué es EventBus?

  • Un bus es una línea de comunicación: Imagina una avenida, una calle, un cable… Lo que sea o sirva para comunicarse, eso es un bus.
  • Event: Traduce a evento, y en este caso necesitamos el evento que emite, y el evento que recibe.. En otras palabras, evento emisor, evento receptor…

Un evento, como cultura general es: Algo que sucede, la ejecución de un suceso en el sistema, sucesos definidos por el usuario o provocados por el usuario; algunos eventos son clic, enter, focus, load, etc. Y aquí usaremos emit y on (emitir, encendido o activo para recibir).

Archivo src/App.vue

En este archivo damos de alta ambos componentes.

<template>
    <div id="app">
        <add-comment></add-comment>
        <list-comment></list-comment>
    </div>
</template>

<script>
import AddComment  from './components/AddComment'
import ListComment from './components/ListComment'

export default {
    name: 'App',
    components: {
        AddComment, ListComment
    }
}
</script>

Archivo src/components/AddComment.vue

Componente número 1, dedicado únicamente a agregar comentarios (la caja de ingresar texto y luego enviarlo al listado).

Toma en cuenta que importamos el archivo bus.js, que es la vía de comunicación de ambos componentes.

<template>
    <div>        
        <input type="text" class="form-control" v-model="comment" v-on:keyup.enter="addComment">
    </div>
</template>

<script>
import EventBus from '../bus'

export default {
    name: 'AddComment',
    data () {
        return {
            comment: ""
        }
    },
    methods: {
        addComment: function() {
            EventBus.$emit('add-comment', this.comment)            
            this.comment = ''
        }
    }
}
</script>

Archivo src/components/ListComment.vue

Componente número 2, dedicado únicamente a listar los comentarios (una lista desordenada).

Aquí también importamos el archivo bus.js porque es la vía de comunicación de ambos componentes.

<template>
    <div>
        <hr>
        <ul class="list-unstyled">
            <li v-for="comment in comments" v-text="comment"></li>
        </ul>
    </div>
</template>

<script>
import EventBus from '../bus'

export default {
    name: 'ListComment',
    data () {
        return {
            comments: []
        }
    },
    created: function() {
        EventBus.$on('add-comment', (item) => {
            this.comments.push(item)
        });
    }
}
</script>

Esto sería todo, ahora ejecutamos el comando npm run dev para lanzar y probar nuestro sistema. Esto te mostrará un mensaje así: Your application is running here: http://localhost:8080

Así que solo debes ir al navegador, escribir http://localhost:8080 y listo, tu sistema estará listo para ser probado.

¿Quieres subir esto a tu servidor?

OK, ejecuta el comando npm run build y esto creará la carpeta build con todos los archivo javascript necesarios.

Esto sería todo por ahora, temas así tocaré en video para que comprendas mejor cada detalle y cada paso.

Adquiere en preventa y aprovecha un gran descuento TDD en Laravel

Comparte en

Creado por: Venezuela Italo Morales

Profesor de #Laravel y #PHP en Rimorsoft Online

Más información


envio de mail desde el propio mail de usuario autentificado

hola, como puedo enviar los mails desde laravel, pero obteniendo el mail del usuario autentificado y que se envie con el correo electronico de este? Es decir, que si el mail de user autentificado es nada@nada.es, el mail salga desde laravel enviado a traves de esa direccion de correo electronico..gracias...

Como instalar el ckeditor en vuejs?

https://github.com/dangvanthanh/vue-ckeditor2...

Como insertar una imagen en un reporte con Laravel Excel maatwebsite

Necesito ayuda con un reporte que estoy haciendo: para empezar requiero de que mi reporte en excel tenga el logo de la empresa en la parte superior de el reporte, luego tambien nesecito que algunos graficos que genero se muestren en imagen dentro del reporte. ya he tengo reportes con multiples hojas y diversos estilos. lo unico que me faltaria seria poner una o varias imagene...

agregar una columna originada de una variable a un select para hacer un insert

/en php -mysql/ /esto funciona con php , pero no logro hacerlo en laravel query builder/