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 <[email protected]>
? 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


Error en modificacion de datos

Hola, Estoy teniendo un error con laravel (5.7) y no le puedo encontrar la vuelta.

Mi problema:

Tengo una lista de usuarios la cual tiene 3 botones (ver, activar y eliminar) mi problema viene con el boton activar el cual activa o desactiva un usuario segun su estado ( si esta activado lo desactiva y si esta desactivado lo activa), pero cuando presiono el boton me tira ...

Como crear un array y almacenarlo en una Base de Datos

Necesito ayuda con un problema, estoy haciendo un tipo de sistema de facturación y los servicios que se van a facturar los quiero guardar en un array, luego éste array almacenarlo en una sola columna de la base de datos. No tengo mucho conocimientos de Arrays. Pero ya había trabajado en una tienda virtual y la parte del carrito la hacía así, con un array.

El punto es qu...

owen-it / laravel-auditing

saludos a la comunidad necesitaría de su ayuda con esta librería   ooowen-it / laravel-auditing para un proyecto en laravel de echo encontré material pero no me es fácil entenderlo (auditoria de usuarios este es link https://pusher.com/tutorials/realtime-audit-trail-laravel me ayudaría mucho un videotutorial gracias!...

No puedo instalar el paquete de shinobi

soy nuevo en esto , estoy viendo su curso de roles y permisos en su canal de youtube, necesito instalar el paquete de shinobi pero no se puede, me sale lo siguiente:

Problem 1 - Installation request for caffeinated/shinobi ^3.3 -> satisfiable by caffeinated/shinobi[v3.3]. - Conclusion: remove laravel/framework v5.8.4 - Conclusion: don't install laravel/fr...