VueJS - Componentes
Vue Components son una de las características importantes de VueJS que crea elementos personalizados, que se pueden reutilizar en HTML.
Trabajemos con un ejemplo y creemos un componente, que nos dará una mejor comprensión de cómo funcionan los componentes con VueJS.
Ejemplo
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript" src = "js/vue_component.js"></script>
</body>
</html>
vue_component.js
Vue.component('testcomponent',{
template : '<div><h1>This is coming from component</h1></div>'
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});
En el archivo .html, hemos creado dos div con id component_test y component_test1. En el.jsarchivos que se muestran arriba, se crean dos instancias de Vue con los identificadores div. Hemos creado un componente común para usar con ambas instancias de vista.
Para crear un componente, la siguiente es la sintaxis.
Vue.component('nameofthecomponent',{ // options});
Una vez que se crea un componente, el nombre del componente se convierte en el elemento personalizado y el mismo se puede usar en el elemento de instancia de Vue creado, es decir, dentro del div con ids component_test y component_test1.
En el .js archivo, hemos utilizado un componente de prueba como el nombre del componente y el mismo nombre se utiliza como elemento personalizado dentro de los divs.
Ejemplo
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
En el componente creado en el .jsarchivo, hemos agregado una plantilla a la que le hemos asignado un código HTML. Esta es una forma deregistering a global component, que puede formar parte de cualquier instancia de vue como se muestra en el siguiente script.
Vue.component('testcomponent',{
template : '<div><h1>This is coming from component</h1></div>'
});
En la ejecución, lo mismo se reflejará en el navegador.
Los componentes reciben la etiqueta de elemento personalizado, es decir <testcomponent></testcomponent>. Sin embargo, cuando lo inspeccionamos en el navegador, no notaremos la etiqueta personalizada en HTML simple presente en la plantilla como se muestra en la siguiente captura de pantalla.
También hemos convertido directamente los componentes en parte de la instancia de vue, como se muestra en el siguiente script.
var vm = new Vue({
el: '#component_test',
components:{
'testcomponent': {
template : '<div><h1>This is coming from component</h1></div>'
}
}
});
Se llama local registration y los componentes solo serán parte de la instancia de vue creada.
Hasta ahora, hemos visto el componente básico con las opciones básicas. Ahora, agreguemos algunas opciones más, como datos y métodos. Así como la instancia de Vue tiene datos y métodos, el componente también comparte lo mismo. Por tanto, ampliaremos el código, que ya hemos visto con datos y métodos.
Ejemplo
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent></testcomponent>
</div>
<div id = "component_test1">
<testcomponent></testcomponent>
</div>
<script type = "text/javascript" src = "js/vue_component.js"></script>
</body>
</html>
vue_component.js
Vue.component('testcomponent',{
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
data: function() {
return {
name : "Ria"
}
},
methods:{
changename : function() {
this.name = "Ben";
},
originalname: function() {
this.name = "Ria";
}
}
});
var vm = new Vue({
el: '#component_test'
});
var vm1 = new Vue({
el: '#component_test1'
});
En el .jsarchivo anterior, hemos agregado datos que son una función, que devuelve un objeto. El objeto tiene una propiedad de nombre, a la que se le asigna el valor 'Ria'. Esto se utiliza en la siguiente plantilla.
template : '<div v-on:mouseover = "changename()" v-on:mouseout = "originalname();"><h1>Custom Component created by <span id = "name">{{name}}</span></h1></div>',
A pesar de tener datos como función en los componentes, podemos usar sus propiedades de la misma manera que usamos con la instancia directa de Vue. Además, hay dos métodos agregados, changename y originalname. En changename, estamos cambiando la propiedad del nombre y en originalname la estamos restableciendo al nombre original.
También hemos agregado dos eventos en el div, mouseover y mouseout. Los detalles de los eventos se discutirán en el capítulo Eventos. Entonces, por ahora, las llamadas al mouseoverchangename llamadas al método y al mouseout originalname método.
La visualización del mismo se muestra en el siguiente navegador.
Como se ve en el navegador anterior, muestra el nombre asignado en la propiedad de datos, que es el mismo nombre. También hemos asignado un evento de mouseover en el div y también un mouseout. Veamos qué sucede cuando pasamos el mouse sobre y el mouseout.
Al pasar el mouse, vemos que el nombre del primer componente se cambia a Ben, sin embargo, el segundo permanece como está. Esto se debe a que el componente de datos es una función y devuelve un objeto. Así, cuando se cambia en un lugar, el mismo no se sobrescribe en otros casos.
Componentes dinámicos
Los componentes dinámicos se crean utilizando la palabra clave <component></component> y está vinculado mediante una propiedad como se muestra en el siguiente ejemplo.
Ejemplo
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "databinding">
<component v-bind:is = "view"></component>
</div>
<script type = "text/javascript">
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
}
}
});
</script>
</body>
</html>
Salida
El componente dinámico se crea utilizando la siguiente sintaxis.
<component v-bind:is = "view"></component>
Tiene v-bind: is = ”view”, y se le asigna una vista de valor. La vista se define en la instancia de Vue de la siguiente manera.
var vm = new Vue({
el: '#databinding',
data: {
view: 'component1'
},
components: {
'component1': {
template: '<div><span style = "font-size:25;color:red;">Dynamic Component</span></div>'
}
}
});
Cuando se ejecuta, la plantilla Dynamic Component se muestra en el navegador.