Registro Global y Local de componentes en Vue.js
En un post anterior vimos Qué son los Componentes en Vue.js y cómo crearlos. Resulta que Vue diferencia entre dos formas de cargar los componentes, la manera global y la forma local. El día de hoy veremos cuál es la diferencia de cada una de estas formas de registrar un componente.
Registro Global
El registro global se realiza al llamar al método component de Vue. Que un componente se registre de forma global significa que estará disponible en cualquier componente de Vue no importa cuán anidado esté. Supongamos que tenemos dos componentes. El primer componente es un botón personalizado y el segundo es un formulario en donde utilizaremos el primer componente.
Vue.component("x-button", {
props: ['text'],
template: `
<button class="btn btn-primary">
{{ '\{\{ text \}\}' }}
</button>
`
});
Vue.component("small-form", {
props: ['url'],
template: `
<form action="url" method="post">
<div class="form-row align-items-center">
<slot></slot>
<x-button text="Submit"></x-button>
</div>
</form>
`
});
var vue = new Vue({
el: "#app"
});Si utilizamos nuestro elemento small-form veremos que este se renderiza de manera correcta. Esto funciona porque el subcomponente x-button el cual se utiliza dentro de small-form está registrado de manera global.
<div id="app" class="m-3">
<small-form url="#">
<div class="col-auto">
<input type="text" class="form-control">
</div>
</small-form>
</div>A continuación el ejemplo corriendo en codepen.
Registro Local
A pesar de que el registro global de componentes nos provee una gran ventaja también tiene una desventaja asociada. Resulta que con el tiempo puede paracer sencillo comenzar a acumular componentes de manera global aún cuando no se utilicen en todas las vistas de tu aplicación. Para esto Vue aporta la flexibilidad de agregar los componentes que se utilizarán en un componente específico. Modifiquemos un poco el ejemplo anterior y utilicemos el objeto components de las opciones de Vue para definir el uso de cada componente.
let button = {
props: ['text'],
template: `
<button class="btn btn-primary">
{{ '\{\{ text \}\}' }}
</button>
`
};
let form = {
props: ['url'],
template: `
<form action="url" method="post">
<div class="form-row align-items-center">
<slot></slot>
<x-button text="Submit"></x-button>
</div>
</form>
`,
components: {
'x-button': button
}
};
var vue = new Vue({
el: "#app",
components: {
'small-form': form
}
});Como puedes notar la definición de las opciones del componente se ha asignado a una variable. El componente x-button se ha declarado para usarse dentro de small-form, y este a su vez se ha declarado para usarse en el componente root. Si quisieramos utilizar x-button en el componente root no podríamos a menos que lo definieramos explícitamente. El HTML a utilizar es el mismo que en el ejemplo anterior y el resultado es el mismo.