Creación de Componentes Personalizados en Aplicaciones Web

Clase 27 de 37 • Curso de Reactividad con Vue.js 3

Contenido del curso

Introducción: fundamentos de Vue.js

Reactividad a profundidad

Templates de Vue.js

APIs internas de Vue.js

Segunda capa: componentes de Vue.js

Siguientes pasos

Tomar examen

Ahora que sabes cómo podemos crear Componentes en nuestra aplicación, tu reto será crear un componente personalizado que mantenga los badges de cada producto.

De tal manera que dentro de mi Producto solo tenga que usarlo como:

<badge :product="product">

Y este me retorne la lista de badges que un producto pueda tener.

Es decir, si mi producto tiene los badges:

{
    new: true,
    offer: false
}

Dentro de mi producto debería poder ver el badge:

<span class="badge new">Nuevo</span>

Si mi producto tiene los badges:

{
    new: true,
    offer: true
}

Dentro de mi producto debería poder ver los badges:

<span class="badge new">Nuevo</span>
<span class="badge offer">Nuevo</span>

Con este reto podremos aprender mejor cómo registrar nuevos componentes en nuestra aplicación y usarlos dentro de otros componentes y de esta manera ir generando una estructura más organizada en nuestro código.

Comentarios

Carlos Eduardo Gomez García

teacher•

Listo: . Product.js

...
<h5>{{ product.name.toUpperCase() }} {{ product.stock == 0 ? "😭" : "😎" }}</h5>

<badge :product="product"></badge>

<p class="description__status" v-if="product.stock == 3">Quedan pocas unidades</p>
...

index.html

...
    <script src="./Badge.js"></script>
    <script src="./Product.js"></script>

    <script>
        app.mount("#app");
    </script>
    
</body>
</html>

Badge.js

app.component("badge", {

    template: /* vue-html */ `
        <span class="badge new" v-if="product.new">Nuevo</span>
        <span class="badge offer" v-if="product.offer">Oferta</span>
    `,

    props: ["product"]

});

El código es el mismo para Options y Composition, dejo el repositorio completo: . https://github.com/RetaxMaster/vue3-platzi-commerce/tree/fcc9c3e03c7e44b2e5e7a49d2f6e03bfd3856006

Roger Ivan Aroa Miranda

student•

Listo xD

# Badge.js
app.component("badge", {
  template: `
<span class="badge new" v-if="product.new">Nuevo</span>
<span class="badge offer" v-if="product.offer">Oferta</span>
`,
  props: ['product']
});

# Product.js
<badge :product="product"></badge>

# index.html
  <script src="./Badge.js"></script>

Ivan Cantillo

student•

No es mucho, pero es trabajo honesto. Lo que hice fu lo siguiente:

Agregue un nuevo array de badges a los productos

badges: [
	{	
        	title: 'Nuevo',
                name: 'new',
                status: true,
         },
        {
                title: 'Oferta',
                name: 'offer',
		status: true,
	},
]

lo recorro de la siguiente forma:

<badge v-for="badge in product.badges" :badge="badge" />

Badges.js

app.component("badge", {
    template: /* vue-html */`
        <span class="badge" :class="badge.name"  v-if="badge.status">{{ badge.title }}</span>
    `,
    props: ["badge"]
});

Daniel Parra

student•

Dejo mi aporte de como lo hice. Tengo una estructura un poco diferente porque estoy usando Typescript y y archivos .vue.

<template>
  <span class="badge new" v-if="product.new">Nuevo</span>
  <span class="badge offer" v-if="product.offer">Oferta</span>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name:"BadgesComponent",
    props:{ product : {}}
})
</script>

Heriberto Ochoa Garcia

student•

Budge.js

app.component("budge", {
    template: /* vue-html */`
    <span class="badge new" v-if="budge.new">Nuevo</span>
    <span class="badge offer" v-if="budge.offert">Oferta</span>
    `,
    props: ["budge"],
});

Product.js

<budge :budge="product"></budge>

index.html

<script src="./Budge.js"></script>

Andrea Estefania Blanco Avila

student•

Hola! Tengo una consulta, yo he trabajado antes con reactjs y ps estoy acostumbrada a ver el paso de props por un console.log, de esa manera me ayuda mentalmente a realizar mis estructuras, pero en vue, como puedo ver por consola las props ? ya que me sale una advertencia y la web se rompe

Samuel Burbano

teacher•

Podrías poner el snippet del código que estás intentando ejecutar? Por lo general podríamos dentro de la función setup en el componente hijo acceder a todas las propiedades que se le están pasando mediante el defineProps

Jose Alejandro Pantoja Giraldo

student•

Es tal cual, copiar y pegar. Esta seria la unica linea nueva como tal <script src="./Badge.js"></script>

Andrea Estefania Blanco Avila

student•

Hola, aquí como lo logré:

index.html

<script src="Badge.js"></script>

product.js

<Badge :product="product"></Badge>

Badge.js

app.component("Badge", {
  template: /* vue-html */`
    <span class="badge new" v-if="product.new" >Nuevo</span>
    <span class="badge offer" v-if="product.offer" >Oferta</span>
  `,
  props: [
    "product"
  ]
});

no me gusto el hecho de estar repitiendo el span una y otra vez, pero bueno, recien estoy aprendiendo vue y funciono xd

Luciano Cavallo

student•

En Product.js:

<badges :product="product"></badges>
      <!-- <span class="badge new" v-if="product.new">Nuevo</span>
      <span class="badge offer" v-if="product.offer">Oferta</span> -->

En Badges.js:

app.component("badges", {
  template: `
    <span class="badge new" v-if="product.new">Nuevo</span>
    <span class="badge offer" v-if="product.offer">Oferta</span>
  `,
  props: ["product"]
})

Y en el index.html agregue, antes del script del Product.js :

  <script src="./Badges.js"></script>
  <script src="./Product.js"></script>

Marco Marin

student•

Mi solución: //Product.js

            <section class="description">
            <h5>{{product.name.toUpperCase()}} {{ product.stock === 0 ? "😌" : "🥰" }}</h5>
            <badges :product="product"/>
            (...)

//Badjes.js

app.component("badges", {
    template: /* vue-html */`
        <span class="badge" 
        :class="{new: product.new}">{{product.new ? "Nuevo" : ""}}</span>
        <span class="badge" 
        :class="{offer: product.offer}">{{product.offer ? "Oferta" : ""}}</span>
    `,
    props: ["product"],

})

Alejandro Repizp

student•

Listo el reto 😎🚀

Badge.js 👌

app.component("badge", {
  template: /* vue-html */ `
        <span class="badge new" v-if="product.new">Nuevo</span>
        <span class="badge offer" v-if="product.offer">Oferta</span>
    `,
  props: {
    product: {
      required: true,
      type: Object,
      default: () => {},
    },
  },
});

Product.js 🦾

<badge :product="product"></badge>

fredic yohany rojas

student•

Pues la verdad no me funciona ni copiando el código directamente.

Miguel Angel Berrio Huamani

student•

Realizado.

Index.html

Agrupo los valores

badge: { new: true, offer: true },

e inserto

<script src="./bagde.js"></script>

Product.js

<badge :badge="product.badge"></badge>

Badge.js

app.component("badge", {
  template: /*vue-html */ `
    <section>
        <span class="badge new" v-if="badge.new">Nuevo</span>
        <span class="badge offer" v-if="badge.offer">Oferta</span>
    </section>
  `,
  props: ["badge"],
});

Joel Andres Bonilla Tellez

student•

izy

...
<h5>{{ product.name.toUpperCase() }} {{ product.stock == 0 ? "😭" : "😎" }}</h5>

<badge :product="product"></badge>

<p class="description__status" v-if="product.stock == 3">Quedan pocas unidades</p>
...

app.component("badge", {

    template: /* vue-html */ `
        <span class="badge new" v-if="product.new">Nuevo</span>
        <span class="badge offer" v-if="product.offer">Oferta</span>
    `,

    props: ["product"]

});

# Badge.js
app.component("badge", {
  template: `
<span class="badge new" v-if="product.new">Nuevo</span>
<span class="badge offer" v-if="product.offer">Oferta</span>
`,
  props: ['product']
});

# Product.js
<badge :product="product"></badge>

# index.html
  <script src="./Badge.js"></script>

badges: [
	{	
        	title: 'Nuevo',
                name: 'new',
                status: true,
         },
        {
                title: 'Oferta',
                name: 'offer',
		status: true,
	},
]
                                	   

<template>
  <span class="badge new" v-if="product.new">Nuevo</span>
  <span class="badge offer" v-if="product.offer">Oferta</span>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
    name:"BadgesComponent",
    props:{ product : {}}
})
</script>

app.component("budge", {
    template: /* vue-html */`
    <span class="badge new" v-if="budge.new">Nuevo</span>
    <span class="badge offer" v-if="budge.offert">Oferta</span>
    `,
    props: ["budge"],
});

app.component("Badge", {
  template: /* vue-html */`
    <span class="badge new" v-if="product.new" >Nuevo</span>
    <span class="badge offer" v-if="product.offer" >Oferta</span>
  `,
  props: [
    "product"
  ]
});

app.component("badges", {
    template: /* vue-html */`
        <span class="badge" 
        :class="{new: product.new}">{{product.new ? "Nuevo" : ""}}</span>
        <span class="badge" 
        :class="{offer: product.offer}">{{product.offer ? "Oferta" : ""}}</span>
    `,
    props: ["product"],

})

app.component("badge", {
  template: /* vue-html */ `
        <span class="badge new" v-if="product.new">Nuevo</span>
        <span class="badge offer" v-if="product.offer">Oferta</span>
    `,
  props: {
    product: {
      required: true,
      type: Object,
      default: () => {},
    },
  },
});

app.component("badge", {
  template: /*vue-html */ `
    <section>
        <span class="badge new" v-if="badge.new">Nuevo</span>
        <span class="badge offer" v-if="badge.offer">Oferta</span>
    </section>
  `,
  props: ["badge"],
});

Creación de Componentes Personalizados en Aplicaciones Web

Introducción: fundamentos de Vue.js

Desarrollo de Aplicaciones Web con Vue.js 3

Presentación del instructor de Vue.js

Vue progresivo: framework y componentes

Problemática del declarative rendering en JavaScript

Declarative rendering con virtual DOM en Vue

Reactividad a profundidad

Paradigma reactivo: responsivo, resiliente y escalable

Proxies: la clave de la reactividad Vue

Creando tu primer mini framework reactivo

Integrar Proxy para crear mini framework reactivo

Refleja tu lógica mantenible con JavaScript

Conceptos clave de reactividad: efectos, track y trigger

Efectos trackers triggers: cómo Vue vincula datos

Templates de Vue.js

Templates de HTML en Vue.js: Mejores Prácticas Esenciales

Estructura inicial de Platzy Commerce con Vue

Expresiones JavaScript en templates Vue

v-bind y clase reactiva en Vue.js

v-show vs v-if en Vue: cuándo usar cada uno

Directiva v-for para listas en Vue.js

Eventos con v-on en templates de Vue

APIs internas de Vue.js

Options API vs Composition API en Vue.js

Diferencia entre data y ref en Vue

Métodos Vue: validar descuentos y carrito

Métodos personalizados con Composition API

Reactive en Vue: cómo agrupar estado

Segunda capa: componentes de Vue.js

Crear componentes reutilizables con Vue

Cómo pasar datos de padre a hijo en Vue

Creación de Componentes Personalizados en Aplicaciones Web

Eventos personalizados en Vue: comunicar hijo a padre

Eventos personalizados con Composition API

Watchers en Vue Options API

Watchers en Vue Composition API

Computed properties vs watchers en Vue

Computed en Vue Composition API

Ciclos de vida en Vue: cuándo y cómo cargar datos

Ciclos de vida en Composition API

Siguientes pasos

Desarrollo de Frontend para Ecommerce con Vue.js 3

Cómo funciona la reactividad de Vue internamente