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

Clase 21 de 38 • Curso Básico de Vue.js 2

Resumen

¿Qué son los componentes difíciles y cómo dominarlos?

Dominar los componentes difíciles es un paso crucial para cualquier desarrollador que trabaje con frameworks modernos de JavaScript, como Vue.js. Los componentes son fundamentales para crear un código más estructurado, semántico y fácil de mantener. A continuación, exploramos algunos de los conceptos esenciales que te permitirán dominar los componentes complejos y utilizarlos de manera eficaz en tus proyectos.

¿Cuál es el rol de las funciones de componentes?

Las funciones de componentes te permiten crear tus propios elementos HTML personalizados. Son esenciales para agrupar contenido y código en componentes comunes. Esto facilita la reutilización de código a lo largo de tu aplicación, promoviendo un código limpio y fácil de gestionar.

¿Cómo se comunican el componente padre e hijo?

La comunicación entre componentes padre e hijo se realiza a través de propiedades (props). El componente padre puede enviar información al componente hijo mediante estas propiedades. Sin embargo, es crucial recordar que el componente hijo no debe modificar directamente estas propiedades. En su lugar, debe enviar eventos que permitan comunicar cambios al componente padre.

¿Qué función tienen los slots en la distribución de contenido?

Los slots ofrecen flexibilidad en la incorporación de contenido desde el componente padre al componente hijo. Permiten insertar HTML en tiempo real, lo que amplía las posibilidades de distribución de contenido en tu aplicación. Esto es útil para crear componentes versátiles que puedan adaptarse a diferentes necesidades sin modificar el código del componente hijo.

¿Por qué es importante entender el ciclo de vida de los componentes?

Cada componente tiene un ciclo de vida que se inicia desde su creación y finaliza con su destrucción. Comprender este ciclo es vital, ya que te brinda la oportunidad de ejecutar código en diferentes etapas de la vida de un componente. Por ejemplo, puedes inicializar datos cuando el componente se monta, o limpiar recursos cuando se desmonta.

Directivas y el sistema de componentes: un binomio poderoso

El sistema de componentes se complementa perfectamente con las directivas. Las directivas proporcionan una manera declarativa de manipular el DOM y manejar comportamiento dinámico, mientras que el sistema de componentes permite estructurar tu aplicación de forma modular.

¿Cómo benefician las directivas y componentes a las aplicaciones web?

Código declarativo: Facilitan la creación de aplicaciones mediante la manipulación declarativa del DOM.
Modularidad: Los componentes fomentan la división del código en módulos reutilizables.
Mantenimiento: Hace que el código sea más fácil de mantener al reducir duplicidades y mejorar la estructura.

¿Qué podemos lograr aplicando estos conceptos profesionalmente?

Ahora que entendemos cómo las directivas y los componentes trabajan juntos, podemos usarlos para desarrollar aplicaciones web de calidad profesional. Al integrar el sistema de componentes con la renderización declarativa, es posible construir aplicaciones robustas y escalables.

¿Cómo comenzar con un proyecto profesional?

Un proyecto ideal para poner en práctica estos conceptos es Platzi CMS. La combinación de un sistema de componentes y renderización declarativa te permitirá crear aplicaciones intuitivas y dinámicas. En este contexto, prácticas como la optimización de la carga de componentes y el manejo eficiente de la comunicación entre ellos harán una gran diferencia.

¡Sigue adelante en tu aprendizaje de componentes y directivas! Con estos conocimientos, estás en el camino correcto para crear aplicaciones web impresionantes y robustas.

Emmanuel Rodríguez

student•

Desde Vue Mastery 👊😎

Roberto Shirásago Domínguez

student•

Solo nos faltan las libraries! :O , por ahi hay una muy famosa que se llama Vuex (si no mal recuerdo). Gracias por la imagen, la guardare!!! :D

Daniel Martin Garcia Muñoz

student•

😊 Nice

Juan Ramirez

student•

Resumen de el modulo de los componentes:

Un componente se crea gracias a la función Vue.component() esta recibe 2 parámetros, el nombre del componente, y el objeto con la configuración del componente.
Propiedades nuevas en los componentes: Template => Aquí va todo el html que crea el componente. Props => Permite traer información del componente padre.
La forma de enviar información del componente padre, al componente hijo es a través de props.
La forma de enviar información del componente hijo, al componente padre es a través de eventos.
El componente hijo nunca debe modificar las propiedades que le pasa el componente padre.
Los slots, permiten que un componente padre le inyecte HTML en tiempo real a u componente hijo.
Y por ultimo que los componentes tienen un ciclo de Vida (Lifecycle), Que nos permite conocer como se crea, actualiza y destruye un componente; y así poder encontrar el punto en el que queremos aplicar una acción

jonathan sanchez

student•

hasta ahora hemos aprendido lo basico para el manejo de vue con rendering declarativo y a crear y manejar componentes.

Me gusta el curso y creo q ahora empieza lo bueno para ser profesionales en este FRAMEWORK DE JAVASCRIPT.

David Campos

student•

Temas vistos hasta ahora:

Vue.component: Para crear componentes reutilizables.
Props: Para enviar información al componente hijo.
Events: Para que el componente hijo se comunique con el componente padre.
Slots: Insertar código HTML en tiempo real enviándolo de padre a hijo.
Ciclo de vida: Funciones que permiten ejecutar código conforme el componente pasa por este ciclo.

Abner Daniel Saavedra Farías

student•

Muy bueno de verdad muchas gracias.

Me gustaría y creo conveniente dejar resúmenes y conceptos en recursos digitales como PDF demás. Una especie de guía.

De resto seguimos a la práctica (Y)

Carlos Eduardo Gomez García

teacher•

Me está encantando Vue, sin embargo, no lo veo muy práctico usarlo en el navegador como una librería que renderiza y ejecuta la aplicación durante la carga de la página, no se si en este curso lleguemos a tocar Vue CLI, pero sin duda me gustaría más ver todo esto con Vue CLI para compilar los componentes:D

Edgar Ramón González Contreras

student•

Hasta ahora todo al 100

José Sebastián Garcia

student•

Paso mi resumen desde la clase 1 hasta la actual:

Las propiedades declaradas en el scope principal de Vue, se pueden usar como cuerpo de un elemento: <elemento>{{dataReturnEnVue}}</elemento>

Si pretendo usar el dataReturnEnVue dentro de atributos aqui es donde entra: v-bind:[atributo] <elemento v-bind:[atributo]="[valorReturnVue]">

Las directivas se usan como atributos: <elemento v-if="condicion"> <elemento v-else-if="condicion"> <elemento v-else>

Esto muestra un elemento si la condicion retorna TRUE <elemento v-show="condicion">

La diferencia en v-if y v-show es que v-if remueve el objeto del DOM, v-show por el contrario simplemente oculta con display.

Nos permite renderizar listas/arrays: array valores:

<ul> <li v-for="(p,i) in prices" v-bind:key="p"> {{i}} - {{p}} </li> </ul> array objetos: <ul> <li v-for="(p, i) in priceswd" v-bind:key="p.day"> {{i}} - {{p.day}} - {{p.value}} </li> </ul>

onclick: v-on determina el evento, luego del : se pone el evento y el método que ejecutara ese evento. Se puede usar el ternary para cambiar texto en el mismo elemento. <span v-on:click="toggleShowPrices"> {{showPrices ? 'Hide prices' : 'Show prices'}} </span>

directiva v-model: linkea las cosas que escribe un usuario con las propiedades definidas dentro de data. Two-way data binding, se puede actualizar desde la interfaz o desde las propiedades en segundo plano, esos cambios se verán reflejados en el elemento donde hayamos especificado el v-model y la propiedad correspondiente.

Componentes: En caracter declarativo se ubican fuera del scope de new Vue({}); ya que para crear componentes reutilizables no es necesario instanciar Vue. Se usa: Vue.component('[nombre del elemento]',{//lo mismo que se usa en la instancia de vue con la diferencia que se puede añadir un template haciendo uso de string literals, dentro se escribe un unico elemento padre(root) y los hijos dentro del mismo, esto se hace en hmtl y se puede combinar con directivas vue.});

slots: Permiten extender la informacion de un contenedor sobretodo de contenido de un padre hacia un hijo. Se extiende la distribucion de contenido. en js se usan dentro de template literals. <slot name="[nombre del slot]"></slot> podemos tener tantos como queramos. En html se invoca dentro del componente, haciendo uso de un elemento propio de Vue llamado "template" <Template v-slot:[nombre del slot]>[Contenido]</Template>

en javascript: new Vue({ el:'[Selector]', data(){//informacion que queremos mostrar}, methods:{todos los métodos que usará vue en la vista}, computed:{ //funciones que del otro lado en el bind se llaman como simples datos/propiedades. Se calculan en tiempo real en base a otras propiedades declaradas en data. }, watch:{ //se dispara cada vez que cambia el valor de una propiedad. los metodos que se declaran reciben un newValue y un oldValue en ese orden. }, created:{}, mounted:{}, methods:{} });

created y mounted forman parte del ciclo de vida de los scopes en vue, mas info en la documentacion del framework. Son eventos que nos podemos atachar si necesitamos realizar alguna acción.

Jose Daniel Barría Reyes

student•

Muchas gracias por tanto!

Usuario anónimo

user•

¿porqué en la documentacion oficial o en vuemastery cuando se declara data lo hace como objeto y no como una función?

en los videos pasados enseñan que si o si es "data" una función

data () : function {}

pero en la documentacion oficial esta como solo data:

// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '&lt;button v-on:click=&quot;count++&quot;&gt;You clicked me {{ count }} times.&lt;/button&gt;'
})

Alberto D. Sosa

student•

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
 // Es lo mismo que...
  data () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

Guillermo Pedro Cuneo

student•

Eso puntualmente lo aclara sobre el final del vídeo "comunicación entre componente: eventos" Lo que dice es: " Si en lugar de una función tuviésemos un objeto no podríamos tener una referencia aislada para cada componente. Cada componente tiene su propio estado y cuando se modifica el estado de un componente por mas que sea el mismo tipo de componente no afecta al otro."

Sebastian Heredia

student•

¡Vamos por el reto! :)

DEL RIO JUNCA JUAN CARLOS

student•

Problemas Técnicos con la clase 21 del curso Vue Básico, Clase con nombre "Antes de continuar, ¡un repaso!" . Se detiene la transmisión y no avanza casi en la mitad de la clase.

Daniel Bretado Reyes

student•

Cambia el servidor, en el reproductor hay un botón para cambiarlo, suele pasar en algunos videos pero se soluciona de esa forma.