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
Guarda tu progreso
Inicia sesión para no perder tu progreso y accede a miles de tutoriales, ejercicios prácticos y nuestro asistente de IA.
Más de 25.000 desarrolladores ya confían en CertiDevs
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
ycreated
beforeMount
ymounted
beforeUpdate
yupdated
beforeUnmount
yunmounted
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.
Completa Vuejs y certifícate
Únete a nuestra plataforma y accede a miles de tutoriales, ejercicios prácticos, proyectos reales y nuestro asistente de IA personalizado para acelerar tu aprendizaje.
Asistente IA
Resuelve dudas al instante
Ejercicios
Practica con proyectos reales
Certificados
Valida tus conocimientos
Más de 25.000 desarrolladores ya se han certificado con CertiDevs