Vuejs: Componentes

En esta guía, exploraremos en profundidad el uso y creación de componentes en Vue 3.5. Los componentes son una pieza fundamental en Vue para construir interfaces de usuario modulares y reutilizables.

Introducción a componentes en Vue 3.5

Vue 3.5 presenta varias mejoras y nuevas funcionalidades en la creación y gestión de componentes. Un componente en Vue es una instancia de Vue con opciones predefinidas. Los componentes permiten encapsular el HTML, CSS y JavaScript de una parte de la interfaz en un solo lugar.

Creación de un componente básico

Para crear un componente en Vue 3.5, se puede utilizar la sintaxis de componentes de un solo archivo (SFC). A continuación, se muestra un ejemplo básico:

<template>
<div class="hello-world">
<h1>{{ message }}</h1>
</div>
</template>

<script>
export default {
name: 'HelloWorld',
data() {
return {
message: 'Hola, mundo!'
};
}
}
</script>

<style scoped>
.hello-world {
font-family: Arial, sans-serif;
}
</style>

Este componente, HelloWorld, incluye una plantilla <template>, una lógica de script <script> y un estilo <style>. La opción scoped en el estilo asegura que los estilos solo se apliquen a este componente.

Comunicación entre componentes

En Vue 3.5, la comunicación entre componentes se realiza mediante props y eventos. Las props permiten pasar datos de un componente padre a un componente hijo, mientras que los eventos permiten que un componente hijo notifique al componente padre sobre cambios o acciones.

Usando props

<template>
<div>
<child-component :message="parentMessage"></child-component>
</div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Mensaje desde el componente padre'
};
}
}
</script>

En el componente hijo, las props se definen de la siguiente manera:

<template>
<div>
<p>{{ message }}</p>
</div>
</template>

<script>
export default {
props: {
message: {
type: String,
required: true
}
}
}
</script>

Emisión de eventos

Para que un componente hijo emita un evento, se utiliza $emit:

<template>
<button @click="sendMessage">Enviar mensaje</button>
</template>

<script>
export default {
methods: {
sendMessage() {
this.$emit('message-sent', 'Este es un mensaje del hijo');
}
}
}
</script>

En el componente padre, se escucha el evento:

<template>
<div>
<child-component @message-sent="handleMessage"></child-component>
</div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
components: {
ChildComponent
},
methods: {
handleMessage(message) {
console.log(message);
}
}
}
</script>

Ciclo de vida de los componentes

Vue 3.5 ofrece varios hooks del ciclo de vida que permiten ejecutar código en diferentes etapas de la vida de un componente:

• beforeCreate y created
• beforeMount y mounted
• beforeUpdate y updated
• beforeUnmount y unmounted

Utilizar estos hooks adecuadamente ayuda a gestionar mejor el estado y el comportamiento de los componentes.

Composición de componentes

Vue 3.5 introduce el API de composición, que permite organizar el código de una manera más modular y reutilizable mediante funciones. A continuación, un ejemplo de cómo usar setup para componer un componente:

<template>
<div>{{ count }}</div>
</template>

<script>
import { ref } from 'vue';

export default {
setup() {
const count = ref(0);
return { count };
}
}
</script>

En este ejemplo, ref se utiliza para definir una variable reactiva. setup se ejecuta antes de que el componente sea creado y devuelve un objeto que se puede usar en la plantilla.