VueJS - Función de renderizado
Hemos visto componentes y su uso. Por ejemplo, tenemos un contenido que debe reutilizarse en todo el proyecto. Podemos convertir lo mismo como un componente y usarlo.
Echemos un vistazo a un ejemplo de un componente simple y veamos qué tiene que hacer la función de renderización dentro de él.
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>
<script type = "text/javascript">
Vue.component('testcomponent',{
template : '<h1>Hello World</h1>',
data: function() {
},
methods:{
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>Considere el ejemplo anterior de un componente simple que imprime Hello World como se muestra en la siguiente captura de pantalla.
Ahora, si queremos reutilizar el componente, podemos hacerlo simplemente imprimiéndolo de nuevo. Por ejemplo,
<div id = "component_test">
<testcomponent></testcomponent>
<testcomponent></testcomponent>
<testcomponent></testcomponent>
<testcomponent></testcomponent>
</div>Y la salida será la siguiente.
Sin embargo, ahora necesitamos algunos cambios en el componente. No queremos que se imprima el mismo texto. ¿Cómo podemos cambiarlo? En caso de que escribamos algo dentro del componente, ¿se tendrá en cuenta?
Consideremos el siguiente ejemplo y veamos qué sucede.
<div id = "component_test">
<testcomponent>Hello Jai</testcomponent>
<testcomponent>Hello Roy</testcomponent>
<testcomponent>Hello Ria</testcomponent>
<testcomponent>Hello Ben</testcomponent>
</div>La salida sigue siendo la misma que habíamos visto antes. No cambia el texto como queremos.
El componente proporciona algo llamado como slots. Hagamos uso de él y veamos si obtenemos los resultados deseados.
Ejemplo
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent>Hello Jai</testcomponent>
<testcomponent>Hello Roy</testcomponent>
<testcomponent>Hello Ria</testcomponent>
<testcomponent>Hello Ben</testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
template : '<h1><slot></slot></h1>',
data: function() {
},
methods:{
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>Como se ve en el código anterior, en la plantilla hemos agregado una ranura, por lo tanto, ahora toma el valor para enviar dentro del componente como se muestra en la siguiente captura de pantalla.
Ahora, consideremos que queremos cambiar el color y el tamaño. Por ejemplo, actualmente estamos usando la etiqueta h1 y queremos cambiar la etiqueta HTML a la etiqueta p o la etiqueta div para el mismo componente. ¿Cómo podemos tener la flexibilidad para realizar tantos cambios?
Podemos hacerlo con la ayuda de la función render. La función de renderizado ayuda a que el componente sea dinámico y a usarlo de la manera que se requiere, manteniéndolo común y ayudando a pasar argumentos usando el mismo componente.
Ejemplo
<html>
<head>
<title>VueJs Instance</title>
<script type = "text/javascript" src = "js/vue.js"></script>
</head>
<body>
<div id = "component_test">
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
<testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent>
<testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent>
<testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
</div>
<script type = "text/javascript">
Vue.component('testcomponent',{
render :function(createElement){
var a = this.elementtype.split(",");
return createElement(a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
},
props:{
elementtype:{
attributes:String,
required:true
}
}
});
var vm = new Vue({
el: '#component_test'
});
</script>
</body>
</html>En el código anterior, cambiamos el componente y agregamos la función de renderizado con la propiedad props usando el siguiente código.
Vue.component('testcomponent',{
render :function(createElement){
var a = this.elementtype.split(",");
return createElement(a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
},
props:{
elementtype:{
attributes:String,
required:true
}
}
});Los accesorios se parecen a los siguientes.
props:{
elementtype:{
attributes:String,
required:true
}
}Hemos definido una propiedad llamada elementtype, que toma atributos de campo de tipo string. Otro campo obligatorio, que menciona que el campo es obligatorio.
En la función de render, hemos usado la propiedad elementtype como se ve en el siguiente fragmento de código.
render :function(createElement){
var a = this.elementtype.split(",");
return createElement(a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)
}La función Render toma createElement como argumento y devuelve el mismo. CreateElement crea el elemento DOM de la misma forma que en JavaScript. También hemos dividido el tipo de elemento en coma, usando los valores en el campo attrs.
CreateElement toma el primer parámetro como etiqueta de elemento que se creará. Se pasa al componente utilizando el siguiente código.
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>El componente debe tomar el campo de accesorios como se muestra arriba. Comienza con: y el nombre de los accesorios. Aquí, estamos pasando la etiqueta del elemento, el color, el tamaño de fuente y la identificación del elemento.
En la función de renderizado, en createElement, estamos dividiendo en coma, por lo que el primer elemento es la etiqueta de elemento, que se le da a createElemet como se muestra en el siguiente fragmento de código.
return createElement(
a[0],{
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}
},
this.$slots.default
)a[0]es la etiqueta del elemento html. El siguiente parámetro son los atributos de la etiqueta del elemento. Se definen en el campo attr en el siguiente fragmento de código.
attrs:{
id:a[3],
style:"color:"+a[1]+";font-size:"+a[2]+";"
}Hemos definido dos atributos para la etiqueta del elemento: id y style. Para id, le estamos pasando un [3], que es el valor que tenemos después de dividirlo por coma. Usando estilo, hemos definido el color y el tamaño de fuente.
Por último está la ranura, que es el mensaje que hemos dado en el componente en el siguiente fragmento de código.
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>Hemos definido el texto que se imprimirá en createElement utilizando el siguiente código.
this.$slots.defaultToma el predeterminado asignado en el campo del componente.
A continuación se muestra el resultado que obtenemos en el navegador.
Los elementos también muestran la estructura. Estos son los componentes que hemos definido:
<div id = "component_test">
<testcomponent :elementtype = "'div,red,25,div1'">Hello Jai</testcomponent>
<testcomponent :elementtype = "'h3,green,25,h3tag'">Hello Roy</testcomponent>
<testcomponent :elementtype = "'p,blue,25,ptag'">Hello Ria</testcomponent>
<testcomponent :elementtype = "'div,green,25,divtag'">Hello Ben</testcomponent>
</div>