Componentes de un solo archivo en Vue.js
Como vimos anteriormente en el artículo Componentes en Vue.js, es posible reutilizar una instancia de Vue y utilizar nuestros propios elementos HTML mediante el método Vue.component. Sin embargo, como pudiste haberte dado cuenta pudiera parecer algo incómo definir el template sin la posibilidad de verlo y manejarlo con sintaxis HTML en nuestro editro de código. Además, esta manera de crear componentes no permite agregar CSS y cada componente debe tener un nombre único en toda la aplicación.
Todo lo anterior puede solucionarse con los componentes de un solo archivo, que son básicamente archivos con la extensión .vue que separan los conceptos de la vista, comportamiento y estilos necesarios para que nuestro componente se renderize y funcione de la forma adecuada.
En este artículo no veremos la configuración necesaria para que nuestra aplicación pueda interpretar componentes de un solo archivo, si este es el caso puedes dar un vistazo a Cómo crear un scaffolding de aplicación en Vue.js. Sin embargo, explicaremos cómo está conformado un componente de un solo archivo en Vue y cómo funciona.
Componentes de un solo archivo
Un componente en Vue está conformado por tres segmentos, el template (HTML), el script (JS) y los estilos (CSS). La definición del template no difiere en nada a un componente creado con Vue.component más que en que debe estar en capsulado en la etiqueta template. Puedes crear un componente con solamente uno de los segmentos, sin importar cuál sea, con dos, o con los tres. A continuación tienes un ejemplo de un componente solo con el template.
<template>
<ul class="nav">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
</ul>
</template>Puede parecer poco útil un componente estático. Sin embargo un buen ejemplo de cuándo podrías utilizarlo es cuando quieres cargar una imagen en SVG con mucho código y no quieres recargar un componente con tanta información. Para el caso visto anteriormente en donde queremos renderizar un menú de navegación puede ser útil recibir la información del componente padre. Para esto debemos agregar la propiedad props y esto junto con todas las demás opciones de nuestro componente deben ser exportadas con export default.
<template>
<ul class="nav">
<li class="nav-item" v-for="item in items" :key="item">
<a class="nav-link" href="#">{{ '\{\{ item \}\}' }}</a>
</li>
</ul>
</template>
<script>
export default {
props: {
items: {
type: Array,
required: true,
},
},
};
</script>Para ver el uso de la directiva v-for puedes revisar nuestro artículo Renderizado de listas en Vue.js. Adicional a esto si quisieras aplicar un estilo a este componente podríamos agregar la respectiva sección para el CSS.
<style scoped>
ul > li {
border: solid 1px silver;
margin-left: 2px;
background: rgb(240, 240, 240);
}
</style>El atributo scoped es para que el estilo solo se aplique al componente en cuestión. Recuerda que este archivo debería tener la extensión .vue. Podríamos por ejemplo llamar a este componente SiteNav.vue.
Utilizar un componente de un solo archivo
Para utilizar el componente creado anteriormente dentro de otro componente basta importarlo mediante un import y cargarlo al componente padre. Observemos por ejemplo como el siguente componente carga SiteNav.
<template>
<div id="app">
<site-nav :items="nav"></site-nav>
</div>
</template>
<script>
import SiteNav from "./components/SiteNav";
export default {
name: "App",
components: {
SiteNav,
},
data() {
return {
nav: ["Home", "Products", "About Us"],
};
},
};
</script>En este ejemplo, estamos suponiendo que el componente que llama a SiteNav está una carpeta más arriba que este y que SiteNav está en la carpeta components. Observa también que importamos el componente como SiteNav pero el tag es site-nav. Puedes ver este ejemplo de componente de un solo archivo en CodeSandbox.