Comunicación entre Componentes en Vue.js: Props y Data Binding

Contenido del curso

Introducción

Rendering Declarativo y Manipulación de DOM

Sistema de Componentes

Ambiente de Desarrollo

Platzi Exchange

¡A producción!

38
Publicación de Aplicaciones con Git y Netlify
05:37 min

Rendering Declarativo y Manipulacion de DOM

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0017:28

Comunicación entre Componentes en Vue.js: Props y Data Binding

Curso Básico de Vue.js 2

Clase 17 de 38

Clase 17 / 38

Recursos

¿Cómo modularizar el proyecto utilizando VueJS?

La modularización de un proyecto en VueJS implica descomponer el código en componentes más pequeños y reutilizables, siguiendo un esquema claro para mejorar la organización del mismo. En este tutorial te guiamos sobre cómo lograrlo, explicando el proceso de comunicación entre componentes padres e hijos, y compartiendo prácticas recomendadas en VueJS.

¿Cómo se definen factores clave al modular?

Para modularizar eficazmente, primero es necesario identificar qué secciones del código pueden convertirse en componentes personalizados usando VueJS. En este sentido, seguir un enfoque paso a paso, permite gestionar cada parte del proyecto de manera ordenada:

Identificación de elementos HTML repetitivos: El primer paso consiste en seleccionar qué partes del código HTML pueden convertirse en componentes para ser reutilizadas.
Definición del componente: Se crea un nuevo componente utilizando Vue.component, especificando el nombre del componente y el objeto de configuración.
Uso de template literals: Recomendamos emplear backticks en JavaScript para facilitar el trabajo con múltiples líneas de HTML en el componente.
Separación de lógica y estilo: Es crucial ubicar la lógica y los estilos CSS correspondientes dentro del mismo componente para un mantenimiento más eficiente.

¿Cómo se envían propiedades de un componente padre a uno hijo?

VueJS facilita la comunicación de datos desde el componente padre al componente hijo a través de props (propiedades).

Definición de Props en el hijo: Las props se declaran en el componente hijo para recibir datos del padre.
Envía de datos del padre al hijo: En el componente padre, se definen los valores para estas props y se transmiten al hijo a través de atributos en el HTML.
Acceso a Props en el hijo: Dentro del componente hijo, las props se manejan como cualquier otra propiedad definida dentro de data.

Las nociones de flexibilidad y alcance de los componentes padres e hijos en la jerarquía son vitales para un eficiente flujo de datos.

¿Cómo se implementan cambios complejos en VueJS?

Implementar cambios complejos requiere una reorganización cuidadosa, preservando la claridad del código.

Agrupación de Props relacionadas: Agrupar propiedades relacionadas en un objeto puede simplificar la estructura de propiedades, reduciendo la necesidad de múltiples líneas de código.
Revisar y probar: Después de realizar cambios significativos, es esencial guardar los cambios, refrescar la página y verificar la consola del navegador para evitar posibles errores.
Optimización de Código: Refinar el código eliminando elementos inactivos o innecesarios, como variables o funciones no utilizadas.

A medida que se avanza en el desmenuzamiento del código hacia componentes funcionales, la eficiencia en su desarrollo y mantenimiento notablemente mejorará.

¿Qué técnicas ayudan a mantener la consistencia en VueJS?

La uniformidad en la sintaxis y las convenciones es crucial en VueJS, para que tanto HTML como la lógica vinculada, funcionen armónicamente y sin contratiempos.

Emplear PascalCase y kebab-case: Mantener el uso de diferentes notaciones (PascalCase para JavaScript y kebab-case para HTML) asegura un código limpio y legible.
Utilizar directivas VueJS: Las directivas como v-bind ayudan a gestionar dinámicamente los atributos y valores dentro de un componente.

Explorar estas prácticas optimiza el desarrollo con VueJS, promoviendo un flujo de trabajo con menos errores y más coherencia.

Adoptar estas recomendaciones en tu flujo de trabajo mejorará la eficiencia y rendirá frutos en tus habilidades de desarrollo. VueJS es una herramienta poderosa cuando se comprende a fondo cómo manejar adecuadamente la comunicación entre sus componentes. Sigue explorando y practicando para convertirte en un experto en el framework.

josue rodrigo fierro morfin

Hace 6 años

codigo

Vue.component('CoinDetail',{
    props:['coin'],
    data(){
        return{
            showPrices:false,
            value:0
        }
    },
    computed:{
        title(){
            return `${this.coin.name} + ${this.coin.symbol}`;
        },
        convertedValue(){
            if(!this.value){
                return 0;
            }
            return this.value / this.coin.price
        }
    },
    methods:{
        toggleShowPrices(){
            this.showPrices =!this.showPrices
        }
    },
    template: `
    <div>
        <img 
            :src="coin.img" alt="" 
            @mouseover="toggleShowPrices"
            @mouseout="toggleShowPrices"
        >
        <h1 :class="coin.changePercent > 0 ? 'green' : 'red' ">
            {{title}}
            <span v-if="coin.changePercent > 0">👍</span>
            <span v-else-if="coin.changePercent < 0">👎</span>
            <span v-else>🤞</span>
            <span @click="toggleShowPrices">
                {{showPrices ? '🙈' : '🐵'}}
            </span>
            <input type="number" v-model="value">
            <span>{{convertedValue}}</span>
            <ul v-show="showPrices">
                <li
                class="uppercase"
                :class="{orange: item.value == coin.price, red: item.value < coin.price, green: item.value > coin.price }"
                v-for="(item, index) in coin.pricesWithDays"
                :key="item.day">
                    {{index}} - {{item.day}} - {{item.value}}
                </li>
            </ul>
        </h2>
    </div>
    `
});

new Vue({
    el:'#app',
    data() {
        return {
            btc:{
                name:'Bitcoin',
                symbol:'BTC',
                img:'https://cryptologos.cc/logos/bitcoin-btc-logo.png',
                changePercent:-10,
                price:8400,
                pricesWithDays: [
                    { day: 'Lunes', value: 8400 },
                    { day: 'Martes', value: 7900 },
                    { day: 'Miercoles', value: 8200 },
                    { day: 'Jueves', value: 9000 },
                    { day: 'Viernes', value: 9400 },
                    { day: 'Sabado', value: 10000 },
                    { day: 'Domingo', value: 10200 },
                ],
            },
            
            color: 'f4f4f4'
        }
    },/*
    methods: {
        toggleShowPrices(){
            this.showPrices = !this.showPrices;
            this.color =this.color.split('')
            .reverse().join('');
        }
    },
    */
})

Luis Herrera

Hace 5 años

Gracias compañero, por alguna razón v-on:mouseOver funciona en el html pero no en el template, en el template usar @mouseover

Comentarios (63)63 comentarios

Emmanuel Rodríguez

Hace 7 años

David Antonio Garcia Saaib

Jimmy Buriticá Londoño

Fernando Andres Muñoz Suazo

Karla

VERDUGO CHAVEZ DIANA ALEJANDRA

Jose Fernando Gallego Cardona

Angel Cabrera

Roberto Shirásago Domínguez

Noé Muñoz

Erick Alpuche

Andres Pinzon

samy fabian villanueva gutierrez

Mauricio Costanzo

Oscar Armando Del Angel Casillas

Luis Daniel Mendoza Rodríguez

Alexis Bustamante

Nacho Anaya

Profesor

Adrián Castillo

Emiliano Kuyen Arturo Pacheco Montero

Asis Melgarejo Lopez

Elvis Milan

Rafael Alexander Gonzalez Diaz

Wilfred Vásquez

Pau Pregoni Juan

Carlos Eduardo Gomez García

Matias Guillermo Sticchi

Juan Castro

Fernando Mellone

Daniel Adolfo Ordoñez Rubio

Introducción

Fundamentos de Vue: Componentes y Desarrollo de Aplicaciones Web

Vue.js: Desarrollo de Aplicaciones Web Profesionales

Creación de aplicaciones reactivas con Vue.js y HTML

Rendering Declarativo y Manipulación de DOM

Renderizado Declarativo en JavaScript: Estado y Vista Sincronizados

Uso de Expresiones JavaScript en Plantillas de Vue.js

Directivas para Atributos Dinámicos en HTML con Vue.js

Directivas de Renderizado Condicional en HTML con Vue.js

Uso de la Directiva v-for en Vue.js para Renderizar Listas

Manejo de Eventos en Vue.js: Click y Mouseover

Condiciones y Clases Dinámicas en Vue.js

Estilos Dinámicos en JavaScript: Cambios de Color Interactivos

Propiedades Computadas y Watchers en Vue.js

Interacción dinámica con formularios y directivas en Vue.js

"Crear un Tracker de Cursos con Vue.js"

Sistema de Componentes

Sistema de Componentes en Fren Word: Modularización y Reutilización

Creación de Componentes Personalizados en Vue.js

Comunicación entre Componentes en Vue.js: Props y Data Binding

Comunicación entre Componentes en Vue: Emisión y Manejo de Eventos

Uso de Slots para Inyectar HTML en Componentes Hijos

Ciclo de Vida de Componentes en Vue.js

Componentes de Vue: Creación y Gestión Eficiente

Componente Modal y Componente Principal en Vue.js

Ambiente de Desarrollo

Configuración Profesional de Vue.js con Visual Studio Code

Creación de Aplicaciones con Dios CLI y su Configuración Básica

Componentes de Archivo Único en Vue.js

Comandos esenciales para proyectos con Vue CLI y configuración de entorno

Platzi Exchange

Instalación y configuración de Tailwind CSS en proyectos HTML

Creación y Gestión de Componentes VUE en Proyectos Web

Creación de Aplicaciones SPA con Vue Router

Uso de Fetch API para Interactuar con Servidores HTTP

Filtros y Directivas para Mejorar Interfaces en JavaScript

Creación de Rutas Dinámicas en Vue.js para Criptomonedas

Navegación Dinámica y Programática en Vue.js

Integración de Componentes de Terceros en Proyectos Vue.js

Manejo de Problemas de Reactividad en Vue.js

Filtros y Ordenamiento en Tablas de Datos con JavaScript

Implementación de Rutas Dinámicas y Conversor de Criptomonedas en Vue.js

¡A producción!

Publicación de Aplicaciones con Git y Netlify

Rendering Declarativo y Manipulacion de DOM

Comunicación entre Componentes en Vue.js: Props y Data Binding