Introducción

Al desarrollar una aplicación grande, siempre es una buena idea dividirla en componentes más pequeños para que el código sea más fácil de leer, estructurar y mantener. La mayoría de los principiantes de Vue entienden lo que son los componentes al menos conceptualmente, pero es posible que no entiendan completamente lo que pueden y no pueden hacer.

En esta guía, veremos qué es un componente en Vue, cómo funciona, cómo pasar datos y eventos a través de ellos y mucho más.

¿Qué es un componente Vue?

Componentes son instancias reutilizables de elementos de Vue que incluyen plantillas, estilos y elementos de JavaScript. Cada componente es "su propia cosa", similar a cómo cada elemento HTML es "su propia cosa", y tanto los componentes Vue como los elementos HTML nos permiten usarlos como bloques de construcción para páginas web.

Puede pensar en los componentes de Vue como elementos HTML imbuidos de JavaScript, que puede definir y manipular usted mismo.

Una aplicación típica de Vue se compone de numerosos componentes que se pueden reutilizar tantas veces como sea necesario.

Por ejemplo, un sitio web habitual tiene secciones que aparecen en todas las páginas: barra de navegación, encabezado, pie de página, etc. Por lo tanto, se considera una buena práctica hacer de cada uno de ellos un componente separado. De esa manera, estamos creando un código bien estructurado, legible, reutilizable y fácil de mantener:

Cómo crear un componente Vue

Hay dos formas básicas de crear un componente Vue, dependiendo de cómo se creó nuestro proyecto: con o sin una configuración de compilación. En el primer caso, cada componente se almacena en un archivo separado. En el segundo caso, puede haber múltiples componentes en un solo archivo.

Nota: Explicando qué es un construir configuración y cómo realizarlo está mucho más allá del alcance de esta guía. Si desea obtener más información sobre los conceptos básicos de Vue, el buen lugar para comenzar es el "Inicio rápido" artículo de la documentación oficial de Vue.

Crear componentes Vue con una configuración de compilación

La mayoría de los proyectos se crean usando el construir configuración, que nos permite crear componentes de un solo archivo (SFC) – archivos de componentes dedicados con el .vue extensión. Esto nos permite encapsular la plantilla, la lógica y el estilo de un componente Vue en un solo archivo:

<!-- Vue-specific JavaScript -->
<script> export default { data() { return { title: 'Hello World!' } } }
</script> <!-- HTML Template -->
<template> <div> <p class="title">{{ title }}</p> </div>
</template> <!-- CSS Styling -->
<style>
.title { color: red;
}
</style>

Nota: Para evitar conflictos con elementos HTML existentes y futuros, siempre es mejor usar nombres de varias palabras en lugar de nombres de una sola palabra al nombrar nuestros componentes. Esto no se aplica a los componentes incorporados, como el componente raíz (App, Transition, y así).

Crear componentes de Vue sin una configuración de compilación

Si, por cualquier motivo, no puede utilizar un administrador de paquetes como npm para instalar Vue en su máquina, aún puede usar Vue en su aplicación. Una alternativa al edificio Vue usando npm es instalar Vue a través de un CDN (Content Delivery Network) directamente en su aplicación. Repasemos rápidamente esta forma de crear un componente Vue.

La instalación de Vue sin compilación nos permitirá usar funcionalidades específicas de Vue como lo hacemos con JavaScript simple. La sintaxis es algo similar a lo que hemos visto en los SFC habituales:

export default { data() { return { title: 'Hello World!' } }, template: ` <div> <p class="title">{{ title }}</p>. </div>`
}

En esta guía, utilizaremos el sintaxis SFC, ya que es el método más utilizado para crear componentes.

Cómo registrar componentes en Vue

Hasta ahora, hemos visto cómo crear componentes en Vue. El siguiente paso será usar estos componentes dentro de otro componente. (jerarquía padre-hijo).

Para hacerlo, primero debemos registrar los componentes que queremos usar. Este registro implica importar y luego registrar componentes. Hay dos opciones para hacerlo: global y registro local.

Componentes de Vue: registro global

Los componentes registrados globalmente, como su nombre lo indica, están disponibles globalmente, lo que significa que pueden usarse en cualquier componente de nuestra aplicación sin que tengamos que importarlos nuevamente. Esto se logra registrando un componente usando el app.component() método:

import ChildComponent from './App.vue' app.component('ChildComponent', ChildComponent)

En una situación en la que tenemos muchos componentes, podemos cadena ellos de esta manera:

app .component('ChildComponent', ChildComponent) .component('ProfileComponent', ProfileComponent)

Después de haber registrado nuestros componentes, podemos usarlos en la plantilla de cualquier componente dentro de esta aplicación usando la siguiente sintaxis:

<ChildComponent/>
<ProfileComponent/>

Componentes de Vue: registro local

Utilizaremos el registro local en la mayoría de los casos porque nos permite medir la disponibilidad de nuestros componentes registrados. Importar estos componentes y luego agregarlos al components opción logra esto:

<script>
import ChildComponent from './ChildComponent.vue' export default { components: { ChildComponent }
}
</script> <template> <ChildComponent />
</template>

Al nombrar componentes, use El caso de Carmel para dejar claro que este es un componente de Vue en lugar de un elemento HTML nativo en las plantillas. Esto también facilita la importación y el registro de componentes en JavaScript.

Nota: Para hacer referencia a nuestro componente registrado dentro de la plantilla, normalmente usamos El caso de Carmel or caja de kebab etiquetas - <MyComponent /> or <my-component />, respectivamente.

Cómo pasar datos a través de los componentes de Vue

Uno de los beneficios de crear componentes es la capacidad de reutilizar el código haciéndolo modular.

Supongamos que estamos creando un componente de perfil de usuario que necesita recibir los datos de cada estudiante desde la página de perfil; en este caso, debemos pasar estos datos desde el componente de perfil (componente principal) al componente de perfil de usuario (componente secundario), y usaremos accesorios.

Accesorios

Los accesorios son atributos personalizados que podemos registrar en un componente, por lo que podemos pasar datos del componente principal al componente secundario usando el props opción dentro de la etiqueta del script:

<script>
export default { props: { title: String, }
}
</script> <template> <h4>{{ title }}</h4>
</template>

Nota: Puede obtener más información sobre accesorios y cómo pasar diferentes tipos de datos del componente principal al componente secundario en “Guía de Vue Props”.

Tragamonedas

Los slots Vue son espacios reservados que nos permiten pasar cualquier tipo de contenido de un componente a otro. Esto brinda un control más centralizado que los accesorios porque, a diferencia de los accesorios, el componente principal controla el contenido dentro del componente secundario. Por ejemplo, podríamos hacer el siguiente botón:

<!-- my-button.vue -->
<template> <button class="btn btn-style"> <slot>Click Me</slot> </button>
</template>

Entonces podemos usar este componente en cualquier lugar que queramos y darle el contenido que deseamos. Si no le damos un contenido, significa que utilizará el valor predeterminado que le dimos (Click Me):

<!-- my-form.vue -->
<template> <my-button> Submit Form <img src="/img/icons/arrow-icon.jpg"> </my-button>
</template>

Cómo emitir eventos desde los componentes de Vue

Aprendimos que los accesorios se usan para enviar datos desde el componente principal al componente secundario. Pero podríamos preguntarnos si había alguna forma de enviar algo desde el componente secundario al componente principal. Y la respuesta es si, los eventos también se pueden enviar desde el componente secundario al componente principal.

Supongamos que tenemos un componente padre (App.vue) que contiene un solo componente secundario (MyBlogPost.vue). Además, el componente secundario contiene un botón que se supone que cambia el título.

Supongamos que queremos cambiar el título de nuestra página cuando se hace clic en un botón, para que se active una función:

<!-- App.vue -->
<script>
import MyBlogPost from './BlogPost.vue' export default { components: { MyBlogPost }, data() { return { title: "Hello World" } }, methods:{ changeText: function(){ this.title = "New Title" } }
}
</script> <template> <div> <MyBlogPost :title="title" @change-text=changeText></MyBlogPost> </div>
</template>

Y el componente hijo se verá así:

<!-- MyBlogPost.vue -->
<script>
export default { props: ['title'], emits: ['change-text']
}
</script> <template> <div class="blog-post"> <h4>{{ title }}</h4> <button @click="$emit('change-text')">Change Title</button> </div>
</template>

Conclusión

En esta guía, hemos aprendido a trabajar con componentes en Vue, lo cual es esencial para cualquiera que use Vue. También aprendimos a enviar y recibir datos, así como a emitir eventos.

• Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
• Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
• Fuente: https://stackabuse.com/introduction-to-vue-components/