Componentes en Vue.js
Un componente en Vue.js es la forma de reutilizar una instancia de Vue tantas veces como sea necesario. Mediante los componentes podemos crear nuestros propios elementos html, cada uno con sus propiedades y métodos particulares que fácilmente podemos reutilizar en toda la aplicación.
Creación de un componente
La sintaxis para crear un componente en Vue es la siguiente:
Vue.component("name", { options })
En donde name es el nombre del componente y { options } son todas aquellas opciones que podemos enviar a una instancia de Vue con dos pequeñas diferencias las cuales son las siguientes: Ya no es necesario especificar el elemento contexto { el: '#app' } y data ahora es una función que retorna un objeto. Veamos el siguente ejemplo.
Vue.component('x-button', {
data: function() {
return {
text: 'Go',
url: 'https://blog.pleets.org'
}
},
template: `
<a :href="url" class="btn btn-primary">
{{ '\{\{ text \}\}' }}
</a>
`
});
var vue = new Vue({
el: "#app",
});Viste la diferencia en data ?. También es importante mencionar aquí que los componentes se registran antes de crear la instancia de Vue con new. Adicional a esto dado que estamos creando nuestro propio elemento HTML es necesario especificar un template, un scaffoling de dicho elemento. En este caso hemos creado en enlace con estilo de botón para finalmente utilizar el componente de la siguiente forma.
<div id="app" class="m-3">
<x-button></x-button>
</div>Observa este mismo ejemplo en codepen:
Si das clic en el botón resources del plugin de codepen notarás que no solo hemos agregado Vue, también hemos agregado bootstrap. Otra cosa de la cuál te puedas haber percatado es que con este ejemplo no es posible crear un botón con un texto o URL diferentes a las que se han definido en el objeto data.
Como buena práctica siempre debes definir el nombre de tus componentes en kebab-case.
Paso de parámetros a un componente
Para pasar parámetros a un componente basta definir dichos parámetros en la propiedad props y pasarlos en el componente a través de sus atributos HTML. Modifiquemos un poco el ejemplo anterior para poder obtener el texto y la url desde el html.
Vue.component('x-button', {
props: ['url', 'text'],
template: `
<a :href="url" class="btn btn-primary">
{{ '\{\{ text \}\}' }}
</a>
`
});
var vue = new Vue({
el: "#app",
});<div id="app" class="m-3">
<x-button
text="Go"
url="https://blog.pleets.org">
</x-button>
</div>El resultado es exactamente el mismo con la diferencia que podemos modificar el texto y la url del componente.