Un poco más sobre los componentes en Vue - 05

▶

Antes de seguir avanzando quiero hablar un poquito más sobre el uso de los componentes ya que los componentes son la pieza clave en todo esto y es lo que vamos a ocupar el 99.9999% de nuestro tiempo en esta sección es precisamente creando componentes entonces aquí ya tenemos tres componentes fíjate que no hay mucho que buscar en base a la estructura que te presentaba antes aquí en la carpeta de componentes tenemos los componentes de nuestra página esto también es un es un componente es un componente en Vue:

src\App.vue

<script setup>
import HelloWorld from '@/components/HelloWorld.vue'
***
<TheWelcome />

Los componentes en Vue, no son más que un archivo con extensión .vue que puede ser desde un sencillo botón reutilizable o no, hasta una página completa, y los componentes que trae por defecto la aplicación recién creada, es un buen ejemplo de esto.

Vemos que por ejemplo, el componente de App.vue es la página, pero, internamente emplea otros componentes reutilizables como el de TheWelcome.vue y HelloWorld.vue:

import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
***
<WelcomeItem>
   <template #icon>
     <ToolingIcon />
   </template>
   <template #heading>Tooling</template>
***

Los componentes tienen 3 elementos principales

Recordemos un poco que los componentes te indicaba que tienen tres piezas principales las cuales varias de ellas son opcionales la sección de la de html si mal no recuerdo cuáles son opcionales el bloque de ccs 

Scope en el CSS

El bloque de CSS usualmente al menos yo no lo defino ya que yo usualmente manejo un ccs global al menos que quiera algo muy específico para un componente Entonces ahí sí defino un ccs específico para dicho componente el scope significa que no escape de este componente:

<style scoped>
.item {
 margin-top: 2rem;
 display: flex;
 position: relative;
}

Es decir que el estilo que le estamos aquí aplicando no se pueda heredar en otros componentes ya que a la final independientemente de que tengamos esta bonita estructura todo por decirlo de una manera coloquial se escupe en una misma página tal cual puedes ver entonces es para que este estilo no choque con el estilo de otro componente ya luego hacemos un experimento con esto pero de momento quédate con eso y aquí puedes ver el trío de marías

1. Ccs con los media queris y demás lo que tú quieras colocar ahí
2. El bloque de Script
3. Y el html

Modo de composicion de API y Opciones 

Aquí también existen varias formas de trabajar con Vue, el de opción que es el option y el composition API. 

Estas son las formas de las cuales tenemos para crear nuestros componentes no voy a indagar mucho en esto porque no quiero mariarte simplemente te estoy presentando un poquito para que lo tengas ahí pendiente cualquier cosa puede serc una clase extra al final Pero al menos de momento no lo considero oportuno yo principalmente voy a trabajar con el llamado option Api que es la sintaxis que puedes ver por acá eh de este tipo la cual colocamos un Export default:

<script>
export default {
    created() {
        
    },
    ***
</script>

Que ya esto también te lo explico un poco más adelante y definimos aquí nuestras variables pero también existe una forma que es entre comillas más desorganizada pero también un poco más expresiva que sería composición Api:

<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'



const openReadmeInEditor = () => fetch('/__open-in-editor?file=README.md')
</script>

Voy a abrir aquí la página en una pestaña nueva damos un click y fíjate que aquí cambia un poco la definición en donde todo se coloca a un mismo nivel.

Variables reactivas

Fíjate que precisamente esto aquí la puedes ver un poco más reducida la sintaxis por ejemplo para definir las variables que son las variables reactivas que te comentaba antes fíjate cómo la están definiendo simplemente la creé aquí como una constante y el ref:

const count = ref(0)
console.log(count.value) // 0

count.value = 1
console.log(count.value) // 1

Significa que va a ser reactivo y por lo tanto, cada vez que hagamos un cambio sobre la variable, automaticamente se va a detectar y aplicar en donde la estemos empleando.

Importaciones relativas @ en Vue

Cuáles componentes los que tenemos acá estos que tenemos acá entonces no sé si te recuerdas pero te había comentado de que por aquí se están definiendo las importaciones una configuración que tenemos creo que era acá justamente esto este ara que era para las importaciones relativas que no es precisamente esto voy a cerrar esto cuál es el problema que tenemos con esta sintaxis:

<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'

Que nosotros aquí en la carpeta de componentes podemos crear otras carpetas todo depende de la aplicación que estemos creando si es una aplicación medianamente grande vas a querer jerarquizar la misma mediante carpetas por ejemplo hay crear una carpeta llamada page si cada componente va a ser representado por una página luego otro componente otra carpeta llamada no sé helpers para componentes de de ayuda una carpeta para el módulo de usuarios es otra para el dashboard otra para el blog el blog resulta que tiene como tres subcategorías más entonces creas más carpetas entonces son un montón de carpetas que luego vas a querer importar e ir importando y Esto va a ser un lío porque vas a tener que ir navegando entonces esto también lo vamos a presentar un poco más adelante pero es básicamente lo que tenemos aquí con el arroba que debería funcionar:

import WelcomeItem from '@/WelcomeItem.vue'
import DocumentationIcon from '@/icons/IconDocumentation.vue'

De esta forma, podemos importar siempre apuntando al directorio de components sin importar en donde definamos el componente.

Tenemos aquí la importaciones relativas que es colocando aquí una ropa y automáticamente qué es lo que hace la ara que es la que tenemos aquí referenciada en el byte justamente este es lo que hace es una importación como quien dice relativa siempre de la carpeta de source entonces no importa donde demoni nos encontremos que siempre va a importar colocando el ara desde source es así de simple y es la forma en la cual siempre deberíamos de trabajar y me parece muy raro de que vi no haya colocado ese esquema desde el inicio claro aquí el visual Studio code 

Componentes de Componentes

Lo interesante de los componentes, es la reutilizacion, por ejemplo:

src/App.vue

<script setup>
import HelloWorld from '@/components/HelloWorld.vue'
import TheWelcome from '@/components/TheWelcome.vue'

Y si vemos otro componente:

src/components/TheWelcome.vue

<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'

Se emplea internamente otros componentes.

Slot para reutilizar componentes

Tenemos dos formas de utilizar los componentes una es referenciando los hacia secas que lo estás importando estás importando su contenido y ya pero en este caso estás definiendo el contenido que se encuentre disponible pero en este caso estás personalizando contenido que va a rajar de salida por lo tanto esto viene siendo una especie de wrapper o envoltorio y el contenido que vale es lo que tú vas a colocar acá pero por más que sea tú en este componente ya tienes cierta estructura definida en este caso viene siendo el css que tienes aquí definido este html y vas a querer colocar el contenido aquí especificado en ciertas partes claves de tu contenido y aquí tenemos otro concepto que viene siendo el uso de los slot que lo presentaremos puede que más adelante si fuera necesario pero en este caso este viene siendo el el slot por defecto por qué tiene ese nombre porque no tiene nombre es decir en un componente podemos definir varias partes en los cuales queramos colocar nuestro contenido suponte que tenemos una página de listado o de detalle vamos con una página de detalle una página de detalle tuviera el contenido y el título t por lo tanto tienes dos partes en donde puedes personalizar la estructura de ese componente Así que tuvieras dos slots uno puede ser perfectamente el slot por defecto y otro que sea un slot con el título en la cual indiques mira aquí va el título y aquí va el contenido y es básicamente para que permita respetar la estructura que ya tienes aquí dispuesta fíjate que si lo vemos acá que es lo que está haciendo ya con esto cerramos aquí está indicando  aquí tenemos otro icono voy a quitar esto un momentico a ver cuál es a ver si lo encuentro por acá Aquí está fíjate que aquí tenemos una parte para indicar el icono tenemos otra parte para indicar el heer que viene siendo esta y finalmente contenido en este caso este componente que es el que se está empleando aquí de welcom otra vez haciendo la navegación estamos aquí en App aquí lo tenemos estamos importando de Welcome:

<WelcomeItem>
    <template #icon>
      <DocumentationIcon />
    </template>
    <template #heading>Documentation</template>

    Vue’s
    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
    provides you with all information you need to get started.
  </WelcomeItem>

  <WelcomeItem>
    <template #icon>
      <ToolingIcon />
    </template>
    <template #heading>Tooling</template>

    This project is served and bundled with

Aquí está empleando otro componente es decir tenemos un componente de componente de componente que a su vez  ya no tiene más componentes pero puede tener más componentes y entonces con la estructura que estamos viendo aquí en pantalla cada uno de estos es el mismo componente que viene siendo el de welcome item que tenemos acá y es por eso que lo vemos varias veces repetidas si lo buscamos acá fíjate que van a aparecer unas 12 veces quitando esta serían 10 veces apertura y cerrado serían cinco veces por lo tanto en la página deberían de aparecer cinco iconit aquí listados vamos a ver uno tenemos dos tenemos tres tenemos cuatro y tenemos cinco ahí lo puedes ver entonces este componente es el que Define esa bonita estructura que puedes ver aquí en pantalla justamente esto que tenemos acá y para eso sirve básicamente Entonces como tenemos varias partes en donde queremos colocar el contenido como quien dice dinámico se definen los slots para que sepa exactamente dónde se puede emplear Entonces ya con esto vimos dos usos de los componentes por una parte un componente en el cual simplemente se emplea y listo tal cual estás viendo por acá que se importa y más nada entonces cualquier cambio que quieras hacer sobre esta componente lo tienes que escribir aquí y por otra parte También tenemos un componente más estructurado en el cual podemos indicar una estructura bastante bonita como las que estamos viendo por acá Armada con ccs y javascript Eh bueno css y html y por supuesto puede tener también javascript en caso de que sea necesario para hacer cualquier acción pero en este caso no es necesario y por aquí defines la estructura html y tú indicas cuáles son las partes claves que el usuario va a poder cambiar que en este caso es Mediante los slots Y fíjate que los nombres son los mismos que se emplean acá el del icono el de details que lo tenemos a ver dets est es una la clase Perdón el de hiden aquí el de hiden y finalmente el por defecto que sería este que tenemos acá otra vez este sería el contenido que se colocaría aquí este sería el contenido que se colocaría por acá y este sería el contenido que se coloca por acá es así de simple por lo demás ya creo que lo puedes asociar un poco muy similar a lo que hacíamos con codiner 4 con los templates es muy similar solo que en este caso el término es el de slot así que no quiero mariarte más de igual manera cuando implementos esto realmente nosotros ya lo vamos a poder entender más fácilmente así que pues nada sin más que decir voy a darle aquí control Z para que esto se mantenga vivo aquí no tiene que aparecer ningún error pendiente con eso y sin más que decir vamos a la siguiente clase