Por: Ernesto Canquiz

Anidando Componentes

En esta sección, realizaremos un ejemplo práctico utilizando un componente genérico reutilizable que contiene un componente secundario que no es útil por sí solo. Este ejemplo se encuentra en la carpeta ./src/core/components/.

Consideremos el componente RadioGroup.vue, que incluye un componente Radio.vue, el cual, por sí mismo, no tiene funcionalidad. La estructura inicial es la siguiente:

└──src/
   ├──core/
   │  ├──assets/
   │  ├──components/
   │  │  ├──app/
   │  │  │  ├──Avatar.vue
   │  │  │  ├──Button.vue
   │  │  │  ├──Card.vue
   │  │  │  ├──Checkbox.vue
   │  │  │  ├──ErrorMessage.vue
   │  │  │  ├──FlassMessage.vue
   │  │  │  ├──Header.vue
   │  │  │  ├──Input.vue
   │  │  │  ├──Link.vue
   │  │  │  ├──Pagination.vue
   │  │  │  ├──Radio.vue
   │  │  │  ├──RadioGroup.vue
   │  │  │  ├──Select.vue
   │  │  │  └──Textarea.vue    
   │  │  └──icons/ 
   │  ├──composables/
   │  ├──layouts/
   │  ├──middleware/
   │  ├──router/
   │  ├──types/
   │  └──utils/
   └──modules/

Dado que el componente Radio.vue es inútil por sí solo, lo encapsularemos en una nueva carpeta llamada ./src/core/components/RadioGroup/. Además, moveremos el componente RadioGroup.vue a esta carpeta y lo renombraremos a Index.vue para mejorar la organización.

La nueva estructura será:

└──src/
   ├──core/
   │  ├──assets/
   │  ├──components/
   │  │  ├──app/
   │  │  │  ├──Avatar.vue
   │  │  │  ├──Button.vue
   │  │  │  ├──Card.vue
   │  │  │  ├──Checkbox.vue
   │  │  │  ├──ErrorMessage.vue
   │  │  │  ├──FlassMessage.vue
   │  │  │  ├──Header.vue
   │  │  │  ├──Input.vue
   │  │  │  ├──Link.vue
   │  │  │  ├──Pagination.vue
   │  │  │  ├──RadioGroup/
   │  │  │  │  ├──Index.vue
   │  │  │  │  └──Radio.vue
   │  │  │  ├──Select.vue
   │  │  │  └──Textarea.vue    
   │  │  └──icons/ 
   │  ├──composables/
   │  ├──layouts/
   │  ├──middleware/
   │  ├──router/
   │  ├──types/
   │  └──utils/
   └──modules/

TIP

Asegúrese de realizar las actualizaciones necesarias en los lugares donde se importó este componente.

<script setup lang="ts">
// ...
// import AppRadioGroup from "./core/components/app/RadioGroup.vue"
import AppRadioGroup from "./core/components/app/RadioGroup/Index.vue"

// ...
</script>

Ahora, veamos cómo luce la estructura cuando el componente RadioGroup/ está cerrado:

└──src/
   ├──core/
   │  ├──assets/
   │  ├──components/
   │  │  ├──app/
   │  │  │  ├──Avatar.vue
   │  │  │  ├──Button.vue
   │  │  │  ├──Card.vue
   │  │  │  ├──Checkbox.vue
   │  │  │  ├──ErrorMessage.vue
   │  │  │  ├──FlassMessage.vue
   │  │  │  ├──Header.vue
   │  │  │  ├──Input.vue
   │  │  │  ├──Link.vue
   │  │  │  ├──Pagination.vue
   │  │  │  ├──RadioGroup/
   │  │  │  ├──Select.vue
   │  │  │  └──Textarea.vue    
   │  │  └──icons/ 
   │  ├──composables/
   │  ├──layouts/
   │  ├──middleware/
   │  ├──router/
   │  ├──types/
   │  └──utils/
   └──modules/

¡Genial! Ahora se ve más limpio.