{"id":6973,"date":"2024-10-18T12:13:00","date_gmt":"2024-10-18T18:13:00","guid":{"rendered":"https:\/\/pulpoline.com\/?p=6973"},"modified":"2024-10-22T10:45:06","modified_gmt":"2024-10-22T16:45:06","slug":"uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes","status":"publish","type":"post","link":"https:\/\/pulpoline.com\/en\/2024\/10\/18\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\/","title":{"rendered":"Uso de Render Functions en Vue para el Desarrollo de Componentes"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Vue.js, un framework JavaScript progresivo, nos brinda herramientas poderosas para construir interfaces de usuario interactivas. Entre ellas, las plantillas son la opci\u00f3n m\u00e1s com\u00fan gracias a su sintaxis intuitiva. Sin embargo, cuando la complejidad de nuestros componentes aumenta y necesitamos un control m\u00e1s granular sobre su estructura, las <strong>funciones de render<\/strong> se convierten en nuestro aliado estrat\u00e9gico.\u00a0<\/p>\n\n\n\n<h4 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"por-que-las-funciones-de-render\"><strong>\u00bfPor qu\u00e9 las funciones de render?<\/strong>&nbsp;<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Al emplear funciones de render, estamos escribiendo JavaScript puro para definir la estructura de nuestros componentes. Esto nos otorga un nivel de flexibilidad sin igual:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Personalizaci\u00f3n extrema:<\/strong> Podemos crear componentes altamente personalizados, ajustando cada detalle de su estructura y comportamiento.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>L\u00f3gica compleja:<\/strong> Las funciones de render nos permiten incorporar l\u00f3gica compleja directamente en la creaci\u00f3n de los elementos del DOM, lo que resulta ideal para componentes din\u00e1micos y condicionales.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Interoperabilidad:<\/strong> Podemos integrar f\u00e1cilmente bibliotecas de terceros que utilizan VNodes,\u00a0 por ejemplo, bibliotecas de gr\u00e1ficos o diagramas.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Control total:<\/strong> Al trabajar directamente con VNodes, tenemos un control absoluto sobre el proceso de renderizado, lo que puede ser crucial en escenarios avanzados.\u00a0<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"cuando-usar-funciones-de-render\"><strong>\u00bfCu\u00e1ndo usar funciones de render?<\/strong>&nbsp;<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Si bien las plantillas son suficientes para la mayor\u00eda de los casos, las funciones de render son especialmente \u00fatiles en las siguientes situaciones:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Componentes altamente personalizados:<\/strong> Cuando necesitamos crear componentes con una estructura \u00fanica y compleja.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Componentes din\u00e1micos:<\/strong> Cuando la estructura del componente cambia con frecuencia en funci\u00f3n de datos o condiciones.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Optimizaci\u00f3n del rendimiento:<\/strong> En casos donde necesitamos un control preciso sobre el proceso de renderizado para mejorar el rendimiento de la aplicaci\u00f3n.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Integraci\u00f3n con otras bibliotecas:<\/strong> Cuando queremos integrar bibliotecas de terceros que utilizan VNodes.\u00a0<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"que-son-las-funciones-de-render-h\"><strong>\u00bfQu\u00e9 son las Funciones de Render (h)? <\/strong>&nbsp;<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">En esencia, una funci\u00f3n de render es una funci\u00f3n de JavaScript que retorna un VNode (Nodo Virtual). Este VNode es una representaci\u00f3n de un elemento del DOM y es la base sobre la cual Vue construye la interfaz de usuario. Al utilizar funciones de render, estamos trabajando directamente con la estructura de los componentes, lo que nos permite construir componentes m\u00e1s complejos y personalizados.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img data-src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_h.png\" data-srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_h.png 960w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_h-300x242.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_h-768x619.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_h-15x12.png 15w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_h-720x581.png 720w\" fetchpriority=\"high\" decoding=\"async\" width=\"960\" height=\"774\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" class=\"wp-image-7025 lazyload\" style=\"width:455px;height:auto\"  sizes=\"(max-width: 960px) 100vw, 960px\" \/><noscript><img fetchpriority=\"high\" decoding=\"async\" width=\"960\" height=\"774\" src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_h.png\" alt=\"\" class=\"wp-image-7025\" style=\"width:455px;height:auto\" srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_h.png 960w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_h-300x242.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_h-768x619.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_h-15x12.png 15w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_h-720x581.png 720w\" sizes=\"(max-width: 960px) 100vw, 960px\"><\/noscript><figcaption class=\"wp-element-caption\">Fuente: Jorge Peraza\u00a0<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img data-src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_template.png\" data-srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_template.png 960w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_template-300x182.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_template-768x466.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_template-18x12.png 18w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_template-720x437.png 720w\" decoding=\"async\" width=\"960\" height=\"582\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" class=\"wp-image-7026 lazyload\" style=\"width:455px\"  sizes=\"(max-width: 960px) 100vw, 960px\" \/><noscript><img decoding=\"async\" width=\"960\" height=\"582\" src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_template.png\" alt=\"\" class=\"wp-image-7026\" style=\"width:455px\" srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_template.png 960w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_template-300x182.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_template-768x466.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_template-18x12.png 18w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/hola_mundo_template-720x437.png 720w\" sizes=\"(max-width: 960px) 100vw, 960px\"><\/noscript><figcaption class=\"wp-element-caption\">Fuente: Jorge Peraza\u00a0<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>h() <\/strong>es la abreviatura de hyperscript (hiper\u00edndice), que significa \u00abJavaScript que produce HTML (lenguaje de marcado de hipertexto)\u00bb. Este nombre se hereda de las convenciones compartidas por muchas implementaciones de DOM virtuales. Un nombre m\u00e1s descriptivo podr\u00eda ser createVNode(), pero un nombre m\u00e1s corto resulta \u00fatil cuando se debe llamar a esta funci\u00f3n muchas veces en una funci\u00f3n de renderizado.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Captura-de-pantalla-2024-10-18-a-las-11.21.13\u202fa.-m-1024x726.png\" data-srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Captura-de-pantalla-2024-10-18-a-las-11.21.13\u202fa.-m-1024x726.png 1024w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Captura-de-pantalla-2024-10-18-a-las-11.21.13\u202fa.-m-300x213.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Captura-de-pantalla-2024-10-18-a-las-11.21.13\u202fa.-m-768x544.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Captura-de-pantalla-2024-10-18-a-las-11.21.13\u202fa.-m-18x12.png 18w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Captura-de-pantalla-2024-10-18-a-las-11.21.13\u202fa.-m-720x510.png 720w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Captura-de-pantalla-2024-10-18-a-las-11.21.13\u202fa.-m.png 1126w\" decoding=\"async\" width=\"1024\" height=\"726\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" class=\"wp-image-6976 lazyload\"  sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><noscript><img decoding=\"async\" width=\"1024\" height=\"726\" src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Captura-de-pantalla-2024-10-18-a-las-11.21.13\u202fa.-m-1024x726.png\" alt=\"\" class=\"wp-image-6976\" srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Captura-de-pantalla-2024-10-18-a-las-11.21.13\u202fa.-m-1024x726.png 1024w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Captura-de-pantalla-2024-10-18-a-las-11.21.13\u202fa.-m-300x213.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Captura-de-pantalla-2024-10-18-a-las-11.21.13\u202fa.-m-768x544.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Captura-de-pantalla-2024-10-18-a-las-11.21.13\u202fa.-m-18x12.png 18w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Captura-de-pantalla-2024-10-18-a-las-11.21.13\u202fa.-m-720x510.png 720w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Captura-de-pantalla-2024-10-18-a-las-11.21.13\u202fa.-m.png 1126w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/noscript><figcaption class=\"wp-element-caption\">Fuente: <a href=\"https:\/\/vuejs.org\/guide\/extras\/render-function.html#basic-usage\" target=\"_blank\" rel=\"noreferrer noopener\">vuejs.org<\/a><\/figcaption><\/figure>\n\n\n\n<h4 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"casos-de-uso-comunes\"><strong>Casos de Uso Comunes<\/strong>&nbsp;<\/h4>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Componentes de bajo nivel:<\/strong> Crear componentes b\u00e1sicos como botones, inputs, etc., con un alto grado de personalizaci\u00f3n.&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Componentes complejos:<\/strong> Desarrollar componentes que requieran una l\u00f3gica de renderizado compleja, como tablas din\u00e1micas, gr\u00e1ficos interactivos o editores WYSIWYG.&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Integraci\u00f3n con otras librer\u00edas:<\/strong> Utilizar funciones de render para integrar Vue con otras librer\u00edas que no utilizan plantillas, como D3.js.&nbsp;&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Optimizaci\u00f3n de rendimiento:<\/strong> Implementar t\u00e9cnicas de optimizaci\u00f3n avanzadas como el renderizado condicional y la memoizaci\u00f3n.&nbsp;<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Adopci\u00f3n en librer\u00edas UI\/UX:<\/strong> Librer\u00edas populares como <strong>Vuetify<\/strong> y <strong>Ant Design<\/strong> han adoptado h como est\u00e1ndar para la definici\u00f3n de sus componentes. Esto significa que si est\u00e1s utilizando alguna de estas librer\u00edas, es muy probable que ya est\u00e9s familiarizado con esta sintaxis y que sea m\u00e1s f\u00e1cil integrar tus componentes personalizados con ellos.&nbsp;<\/li>\n<\/ul>\n\n\n\n<h4 class=\"wp-block-heading\" class=\"wp-block-heading\" id=\"creando-componentes\"><strong>Creando Componentes<\/strong>&nbsp;<\/h4>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img data-src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-939x1024.png\" data-srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-939x1024.png 939w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-275x300.png 275w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-768x837.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-11x12.png 11w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-720x785.png 720w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label.png 1018w\" loading=\"lazy\" decoding=\"async\" width=\"939\" height=\"1024\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" class=\"wp-image-7027 lazyload\" style=\"width:580px\"  sizes=\"(max-width: 939px) 100vw, 939px\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"939\" height=\"1024\" src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-939x1024.png\" alt=\"\" class=\"wp-image-7027\" style=\"width:580px\" srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-939x1024.png 939w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-275x300.png 275w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-768x837.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-11x12.png 11w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-720x785.png 720w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label.png 1018w\" sizes=\"(max-width: 939px) 100vw, 939px\"><\/noscript><figcaption class=\"wp-element-caption\">Fuente: Jorge Peraza\u00a0<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Este c\u00f3digo muestra c\u00f3mo utilizar la funci\u00f3n h de Vue.js para crear un componente simple y reutilizable que genera etiquetas &lt;label>. Al entender este ejemplo, se adquiere una base s\u00f3lida para construir componentes m\u00e1s complejos y personalizar la interfaz de usuario de una aplicaci\u00f3n Vue.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img data-src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input_v-model-1024x958.png\" data-srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input_v-model-1024x958.png 1024w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input_v-model-300x281.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input_v-model-768x719.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input_v-model-1536x1437.png 1536w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input_v-model-2048x1917.png 2048w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input_v-model-13x12.png 13w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input_v-model-720x674.png 720w\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"958\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" class=\"wp-image-7028 lazyload\" style=\"width:580px\"  sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"958\" src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input_v-model-1024x958.png\" alt=\"\" class=\"wp-image-7028\" style=\"width:580px\" srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input_v-model-1024x958.png 1024w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input_v-model-300x281.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input_v-model-768x719.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input_v-model-1536x1437.png 1536w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input_v-model-2048x1917.png 2048w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input_v-model-13x12.png 13w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input_v-model-720x674.png 720w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/noscript><figcaption class=\"wp-element-caption\">Fuente: Jorge Peraza\u00a0<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed definimos un input de determinados tipos, que ser\u00e1 validado seg\u00fan su prop, y colocando por defecto un input[type=text]. Tambi\u00e9n podemos observar c\u00f3mo implementar un v-model, mediante la propiedad modelValue y el m\u00e9todo handleInputChange, creando el evento del componente update:modelValue. De esta manera ya tenemos definido un input con su v-model y aplicaci\u00f3n de diferentes atributos HTML.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img data-src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-715x1024.png\" data-srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-715x1024.png 715w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-210x300.png 210w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-768x1100.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-1073x1536.png 1073w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-1430x2048.png 1430w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-8x12.png 8w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-720x1031.png 720w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots.png 1982w\" loading=\"lazy\" decoding=\"async\" width=\"715\" height=\"1024\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" class=\"wp-image-7029 lazyload\" style=\"width:550px\"  sizes=\"(max-width: 715px) 100vw, 715px\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"715\" height=\"1024\" src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-715x1024.png\" alt=\"\" class=\"wp-image-7029\" style=\"width:550px\" srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-715x1024.png 715w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-210x300.png 210w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-768x1100.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-1073x1536.png 1073w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-1430x2048.png 1430w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-8x12.png 8w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-720x1031.png 720w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots.png 1982w\" sizes=\"(max-width: 715px) 100vw, 715px\"><\/noscript><figcaption class=\"wp-element-caption\">Fuente: Jorge Peraza\u00a0<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Aqu\u00ed podemos apreciar diferentes puntos claves.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-return-1024x474.png\" data-srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-return-1024x474.png 1024w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-return-300x139.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-return-768x356.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-return-1536x711.png 1536w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-return-18x8.png 18w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-return-720x333.png 720w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-return.png 1982w\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"474\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" class=\"wp-image-7030 lazyload\"  sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"474\" src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-return-1024x474.png\" alt=\"\" class=\"wp-image-7030\" srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-return-1024x474.png 1024w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-return-300x139.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-return-768x356.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-return-1536x711.png 1536w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-return-18x8.png 18w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-return-720x333.png 720w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-slots-return.png 1982w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/noscript><figcaption class=\"wp-element-caption\">Fuente: Jorge Peraza\u00a0<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Los componentes previamente Creados, est\u00e1n siendo envueltos por otro componente div.form-input-wrapper, y est\u00e1n recibiendo las propiedades que le corresponde. &nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Se debe considerar que el orden en que se agregan elementos dentro del 3 par\u00e1metro (childrens), ser\u00e1 el mismo al momento de crear el \u00e1rbol de nodos en el documento.&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img data-src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/nodos-hijos-1024x332.png\" data-srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/nodos-hijos-1024x332.png 1024w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/nodos-hijos-300x97.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/nodos-hijos-768x249.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/nodos-hijos-18x6.png 18w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/nodos-hijos-720x233.png 720w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/nodos-hijos.png 1056w\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"332\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" class=\"wp-image-7031 lazyload\" style=\"width:580px\"  sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"332\" src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/nodos-hijos-1024x332.png\" alt=\"\" class=\"wp-image-7031\" style=\"width:580px\" srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/nodos-hijos-1024x332.png 1024w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/nodos-hijos-300x97.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/nodos-hijos-768x249.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/nodos-hijos-18x6.png 18w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/nodos-hijos-720x233.png 720w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/nodos-hijos.png 1056w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/noscript><figcaption class=\"wp-element-caption\">Fuente: Jorge Peraza\u00a0<\/figcaption><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img data-src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-al-renderizar-1024x246.png\" data-srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-al-renderizar-1024x246.png 1024w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-al-renderizar-300x72.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-al-renderizar-768x185.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-al-renderizar-18x4.png 18w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-al-renderizar-720x173.png 720w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-al-renderizar.png 1422w\" loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"246\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" class=\"wp-image-7032 lazyload\"  sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"246\" src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-al-renderizar-1024x246.png\" alt=\"\" class=\"wp-image-7032\" srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-al-renderizar-1024x246.png 1024w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-al-renderizar-300x72.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-al-renderizar-768x185.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-al-renderizar-18x4.png 18w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-al-renderizar-720x173.png 720w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/input-label-al-renderizar.png 1422w\" sizes=\"(max-width: 1024px) 100vw, 1024px\"><\/noscript><figcaption class=\"wp-element-caption\">Fuente: Jorge Peraza\u00a0<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Podr\u00edamos definir y condicionar el uso de slots. En caso de que el usuario quisiera ingresar un icono, podr\u00eda hacerlo mediante una prop, o aprovechar el slot, para ingresar el elemento que desee.\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/slot-condicionado.png\" data-srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/slot-condicionado.png 1018w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/slot-condicionado-300x129.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/slot-condicionado-768x330.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/slot-condicionado-18x8.png 18w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/slot-condicionado-720x310.png 720w\" loading=\"lazy\" decoding=\"async\" width=\"1018\" height=\"438\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" class=\"wp-image-7033 lazyload\"  sizes=\"(max-width: 1018px) 100vw, 1018px\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1018\" height=\"438\" src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/slot-condicionado.png\" alt=\"\" class=\"wp-image-7033\" srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/slot-condicionado.png 1018w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/slot-condicionado-300x129.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/slot-condicionado-768x330.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/slot-condicionado-18x8.png 18w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/slot-condicionado-720x310.png 720w\" sizes=\"(max-width: 1018px) 100vw, 1018px\"><\/noscript><figcaption class=\"wp-element-caption\">Fuente: Jorge Peraza\u00a0<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Podr\u00edamos tener adem\u00e1s un conjunto de componentes y registrarlo de manera global, tal como si de un plugin se tratara. Esto lo conseguimos creando un archivo install.ts, preferiblemente al mismo nivel de nuestro main.ts&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As\u00ed quedar\u00eda nuestro archivo install.ts&nbsp;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img data-src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/install.png\" data-srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/install.png 1268w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/install-300x138.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/install-1024x470.png 1024w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/install-768x353.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/install-18x8.png 18w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/install-720x330.png 720w\" loading=\"lazy\" decoding=\"async\" width=\"1268\" height=\"582\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" class=\"wp-image-7034 lazyload\"  sizes=\"(max-width: 1268px) 100vw, 1268px\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"1268\" height=\"582\" src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/install.png\" alt=\"\" class=\"wp-image-7034\" srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/install.png 1268w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/install-300x138.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/install-1024x470.png 1024w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/install-768x353.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/install-18x8.png 18w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/install-720x330.png 720w\" sizes=\"(max-width: 1268px) 100vw, 1268px\"><\/noscript><figcaption class=\"wp-element-caption\">Fuente: Jorge Peraza\u00a0<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Y as\u00ed quedar\u00eda nuestra implementaci\u00f3n en nuestro main.ts\u00a0<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img data-src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/main.png\" data-srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/main.png 960w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/main-300x152.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/main-768x389.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/main-18x9.png 18w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/main-720x365.png 720w\" loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"486\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" class=\"wp-image-7035 lazyload\" style=\"width:580px\"  sizes=\"(max-width: 960px) 100vw, 960px\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"486\" src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/main.png\" alt=\"\" class=\"wp-image-7035\" style=\"width:580px\" srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/main.png 960w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/main-300x152.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/main-768x389.png 768w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/main-18x9.png 18w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/main-720x365.png 720w\" sizes=\"(max-width: 960px) 100vw, 960px\"><\/noscript><figcaption class=\"wp-element-caption\">Fuente: Jorge Peraza<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Las funciones de render (h) en Vue.js ofrecen un nivel de control y flexibilidad sin igual en la creaci\u00f3n de componentes. Al permitirnos trabajar directamente con la estructura de los componentes a trav\u00e9s de JavaScript puro, podemos construir interfaces de usuario altamente personalizadas y din\u00e1micas que se adaptan a cualquier escenario.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Sin embargo, es importante recordar:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Curva de aprendizaje: El uso de funciones de render requiere un mayor conocimiento de JavaScript y de la estructura interna de Vue.\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Mayor verbosidad: En comparaci\u00f3n con las plantillas, las funciones de render pueden resultar m\u00e1s prolijas para definir estructuras simples.\u00a0<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">En conclusi\u00f3n, las funciones de render son una herramienta poderosa que todo desarrollador Vue.js deber\u00eda conocer. Aunque no son necesarias para la mayor\u00eda de los casos, son indispensables cuando necesitamos un control absoluto sobre la creaci\u00f3n de nuestros componentes. Al dominar esta t\u00e9cnica, podremos llevar nuestras habilidades en Vue.js al siguiente nivel.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Explora estos recursos adicionales para aprender m\u00e1s:&nbsp;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Documentaci\u00f3n oficial de Vue.js:<\/strong> <a href=\"https:\/\/vuejs.org\/guide\/extras\/render-function.html\" target=\"_blank\" rel=\"noreferrer noopener\">Link<\/a>\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Tutoriales en profundidad:<\/strong> <a href=\"https:\/\/www.youtube.com\/watch?v=l0eZCvJcYZ8\" target=\"_blank\" rel=\"noreferrer noopener\">Link<\/a>\u00a0<\/li>\n<\/ul>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Ejemplos de c\u00f3digo en GitHub:<\/strong> <a href=\"https:\/\/github.com\/vuetifyjs\/vuetify\" target=\"_blank\" rel=\"noreferrer noopener\">Vuetify<\/a> <a href=\"https:\/\/github.com\/vueComponent\/ant-design-vue\" target=\"_blank\" rel=\"noreferrer noopener\">Ant-Design<\/a>\u00a0<\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-columns has-background is-layout-flex wp-container-core-columns-is-layout-8f761849 wp-block-columns-is-layout-flex\" style=\"background:radial-gradient(rgb(129,85,241) 33%,rgb(119,51,201) 100%);font-style:normal;font-weight:400\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:400px\">\n<figure class=\"wp-block-image alignwide size-full\"><img data-src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/07\/compu-2-02-1.png\" data-srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/07\/compu-2-02-1.png 515w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/07\/compu-2-02-1-300x177.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/07\/compu-2-02-1-18x12.png 18w\" loading=\"lazy\" decoding=\"async\" width=\"515\" height=\"303\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" class=\"wp-image-6891 lazyload\"  sizes=\"(max-width: 515px) 100vw, 515px\" \/><noscript><img loading=\"lazy\" decoding=\"async\" width=\"515\" height=\"303\" src=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/07\/compu-2-02-1.png\" alt=\"\" class=\"wp-image-6891\" srcset=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/07\/compu-2-02-1.png 515w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/07\/compu-2-02-1-300x177.png 300w, https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/07\/compu-2-02-1-18x12.png 18w\" sizes=\"(max-width: 515px) 100vw, 515px\"><\/noscript><\/figure>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:200px\">\n<p class=\"has-white-color has-text-color has-link-color has-medium-font-size wp-elements-1 wp-block-paragraph\"><strong>Cont\u00e1ctanos<\/strong><\/p>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\" style=\"grid-template-columns:15% auto\"><figure class=\"wp-block-media-text__media\"><a href=\"www.pulpoline.com\"><img data-src=\"https:\/\/devtalenty.com\/wp-content\/uploads\/2024\/06\/Group-1.png\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" class=\"wp-image-1927 size-full lazyload\"\/><noscript><img decoding=\"async\" src=\"https:\/\/devtalenty.com\/wp-content\/uploads\/2024\/06\/Group-1.png\" alt=\"\" class=\"wp-image-1927 size-full\"><\/noscript><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-white-color has-text-color has-link-color has-small-font-size wp-elements-2 wp-block-paragraph\"><a href=\"http:\/\/www.pulpoline.com\">www.pulpoline.com<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\" style=\"grid-template-columns:15% auto\"><figure class=\"wp-block-media-text__media\"><a href=\"maitlto:hola@pulpoline.com\"><img data-src=\"https:\/\/devtalenty.com\/wp-content\/uploads\/2024\/06\/Group-1-1.png\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" class=\"wp-image-1966 size-full lazyload\"\/><noscript><img decoding=\"async\" src=\"https:\/\/devtalenty.com\/wp-content\/uploads\/2024\/06\/Group-1-1.png\" alt=\"\" class=\"wp-image-1966 size-full\"><\/noscript><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-white-color has-text-color has-link-color has-small-font-size wp-elements-3 wp-block-paragraph\"><a href=\"mailto:hola@pulpoline.com\">hola@pulpoline.com<\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-media-text is-stacked-on-mobile\" style=\"grid-template-columns:15% auto\"><figure class=\"wp-block-media-text__media\"><a href=\"https:\/\/www.linkedin.com\/company\/pulpoline\/\"><img data-src=\"https:\/\/devtalenty.com\/wp-content\/uploads\/2024\/06\/Group-2.png\" decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" alt=\"\" class=\"wp-image-1967 size-full lazyload\"\/><noscript><img decoding=\"async\" src=\"https:\/\/devtalenty.com\/wp-content\/uploads\/2024\/06\/Group-2.png\" alt=\"\" class=\"wp-image-1967 size-full\"><\/noscript><\/a><\/figure><div class=\"wp-block-media-text__content\">\n<p class=\"has-white-color has-text-color has-link-color has-small-font-size wp-elements-4 wp-block-paragraph\"><a href=\"https:\/\/www.linkedin.com\/company\/pulpoline\/\">PulpoLine<\/a><\/p>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Autor: Jorge Peraza<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vue.js, un framework JavaScript progresivo, nos brinda herramientas poderosas para construir interfaces de usuario interactivas. Entre ellas, las plantillas son la opci\u00f3n m\u00e1s com\u00fan gracias a su sintaxis intuitiva. Sin embargo, cuando la complejidad de nuestros componentes aumenta y necesitamos un control m\u00e1s granular sobre su estructura, las funciones de render se convierten en nuestro [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":6991,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"footnotes":""},"categories":[115,3,5],"tags":[],"class_list":["post-6973","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code","category-development","category-technology"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Uso de Render Functions en Vue para el Desarrollo de Componentes - PulpoLine<\/title>\n<meta name=\"description\" content=\"Vue.js, un framework JavaScript progresivo, nos brinda herramientas poderosas para construir interfaces de usuario interactivas. Entre ellas, las\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pulpoline.com\/en\/2024\/10\/18\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Uso de Render Functions en Vue para el Desarrollo de Componentes - PulpoLine\" \/>\n<meta property=\"og:description\" content=\"Vue.js, un framework JavaScript progresivo, nos brinda herramientas poderosas para construir interfaces de usuario interactivas. Entre ellas, las\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pulpoline.com\/en\/2024\/10\/18\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\/\" \/>\n<meta property=\"og:site_name\" content=\"PulpoLine\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/pulpoline\" \/>\n<meta property=\"article:published_time\" content=\"2024-10-18T18:13:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-10-22T16:45:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Uso-de-Render-Functions-en-Vue-para-el-Desarrollo-de-Componentes.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1450\" \/>\n\t<meta property=\"og:image:height\" content=\"753\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Hillary Amanda Quir\u00f3s Chavarr\u00eda\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/pulpoline.com\\\/2024\\\/10\\\/18\\\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pulpoline.com\\\/2024\\\/10\\\/18\\\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\\\/\"},\"author\":{\"name\":\"Hillary Amanda Quir\u00f3s Chavarr\u00eda\",\"@id\":\"https:\\\/\\\/pulpoline.com\\\/#\\\/schema\\\/person\\\/26d887f6a6655dae9a8e52598002dea6\"},\"headline\":\"Uso de Render Functions en Vue para el Desarrollo de Componentes\",\"datePublished\":\"2024-10-18T18:13:00+00:00\",\"dateModified\":\"2024-10-22T16:45:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/pulpoline.com\\\/2024\\\/10\\\/18\\\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\\\/\"},\"wordCount\":1120,\"publisher\":{\"@id\":\"https:\\\/\\\/pulpoline.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/pulpoline.com\\\/2024\\\/10\\\/18\\\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pulpoline.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/Uso-de-Render-Functions-en-Vue-para-el-Desarrollo-de-Componentes.png\",\"articleSection\":[\"Code\",\"Development\",\"Technology\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pulpoline.com\\\/2024\\\/10\\\/18\\\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\\\/\",\"url\":\"https:\\\/\\\/pulpoline.com\\\/2024\\\/10\\\/18\\\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\\\/\",\"name\":\"Uso de Render Functions en Vue para el Desarrollo de Componentes - PulpoLine\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pulpoline.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/pulpoline.com\\\/2024\\\/10\\\/18\\\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/pulpoline.com\\\/2024\\\/10\\\/18\\\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/pulpoline.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/Uso-de-Render-Functions-en-Vue-para-el-Desarrollo-de-Componentes.png\",\"datePublished\":\"2024-10-18T18:13:00+00:00\",\"dateModified\":\"2024-10-22T16:45:06+00:00\",\"description\":\"Vue.js, un framework JavaScript progresivo, nos brinda herramientas poderosas para construir interfaces de usuario interactivas. Entre ellas, las\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/pulpoline.com\\\/2024\\\/10\\\/18\\\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pulpoline.com\\\/2024\\\/10\\\/18\\\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pulpoline.com\\\/2024\\\/10\\\/18\\\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\\\/#primaryimage\",\"url\":\"https:\\\/\\\/pulpoline.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/Uso-de-Render-Functions-en-Vue-para-el-Desarrollo-de-Componentes.png\",\"contentUrl\":\"https:\\\/\\\/pulpoline.com\\\/wp-content\\\/uploads\\\/2024\\\/10\\\/Uso-de-Render-Functions-en-Vue-para-el-Desarrollo-de-Componentes.png\",\"width\":1450,\"height\":753},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/pulpoline.com\\\/2024\\\/10\\\/18\\\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/pulpoline.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Uso de Render Functions en Vue para el Desarrollo de Componentes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pulpoline.com\\\/#website\",\"url\":\"https:\\\/\\\/pulpoline.com\\\/\",\"name\":\"PulpoLine\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/pulpoline.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pulpoline.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/pulpoline.com\\\/#organization\",\"name\":\"PulpoLine\",\"url\":\"https:\\\/\\\/pulpoline.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/pulpoline.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/pulpoline.com\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/Logo-PulpoLine-fondo-blanco-04.jpg\",\"contentUrl\":\"https:\\\/\\\/pulpoline.com\\\/wp-content\\\/uploads\\\/2021\\\/10\\\/Logo-PulpoLine-fondo-blanco-04.jpg\",\"width\":990,\"height\":925,\"caption\":\"PulpoLine\"},\"image\":{\"@id\":\"https:\\\/\\\/pulpoline.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/pulpoline\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/pulpoline.com\\\/#\\\/schema\\\/person\\\/26d887f6a6655dae9a8e52598002dea6\",\"name\":\"Hillary Amanda Quir\u00f3s Chavarr\u00eda\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/34ff8ec2488914a9254cbb658fb2e0549999bcddc40a182383935db50d09f181?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/34ff8ec2488914a9254cbb658fb2e0549999bcddc40a182383935db50d09f181?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/34ff8ec2488914a9254cbb658fb2e0549999bcddc40a182383935db50d09f181?s=96&d=mm&r=g\",\"caption\":\"Hillary Amanda Quir\u00f3s Chavarr\u00eda\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Uso de Render Functions en Vue para el Desarrollo de Componentes - PulpoLine","description":"Vue.js, un framework JavaScript progresivo, nos brinda herramientas poderosas para construir interfaces de usuario interactivas. Entre ellas, las","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/pulpoline.com\/en\/2024\/10\/18\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\/","og_locale":"en_US","og_type":"article","og_title":"Uso de Render Functions en Vue para el Desarrollo de Componentes - PulpoLine","og_description":"Vue.js, un framework JavaScript progresivo, nos brinda herramientas poderosas para construir interfaces de usuario interactivas. Entre ellas, las","og_url":"https:\/\/pulpoline.com\/en\/2024\/10\/18\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\/","og_site_name":"PulpoLine","article_publisher":"https:\/\/www.facebook.com\/pulpoline","article_published_time":"2024-10-18T18:13:00+00:00","article_modified_time":"2024-10-22T16:45:06+00:00","og_image":[{"width":1450,"height":753,"url":"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Uso-de-Render-Functions-en-Vue-para-el-Desarrollo-de-Componentes.png","type":"image\/png"}],"author":"Hillary Amanda Quir\u00f3s Chavarr\u00eda","twitter_card":"summary_large_image","twitter_misc":{"Written by":false,"Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/pulpoline.com\/2024\/10\/18\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\/#article","isPartOf":{"@id":"https:\/\/pulpoline.com\/2024\/10\/18\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\/"},"author":{"name":"Hillary Amanda Quir\u00f3s Chavarr\u00eda","@id":"https:\/\/pulpoline.com\/#\/schema\/person\/26d887f6a6655dae9a8e52598002dea6"},"headline":"Uso de Render Functions en Vue para el Desarrollo de Componentes","datePublished":"2024-10-18T18:13:00+00:00","dateModified":"2024-10-22T16:45:06+00:00","mainEntityOfPage":{"@id":"https:\/\/pulpoline.com\/2024\/10\/18\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\/"},"wordCount":1120,"publisher":{"@id":"https:\/\/pulpoline.com\/#organization"},"image":{"@id":"https:\/\/pulpoline.com\/2024\/10\/18\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\/#primaryimage"},"thumbnailUrl":"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Uso-de-Render-Functions-en-Vue-para-el-Desarrollo-de-Componentes.png","articleSection":["Code","Development","Technology"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/pulpoline.com\/2024\/10\/18\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\/","url":"https:\/\/pulpoline.com\/2024\/10\/18\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\/","name":"Uso de Render Functions en Vue para el Desarrollo de Componentes - PulpoLine","isPartOf":{"@id":"https:\/\/pulpoline.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/pulpoline.com\/2024\/10\/18\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\/#primaryimage"},"image":{"@id":"https:\/\/pulpoline.com\/2024\/10\/18\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\/#primaryimage"},"thumbnailUrl":"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Uso-de-Render-Functions-en-Vue-para-el-Desarrollo-de-Componentes.png","datePublished":"2024-10-18T18:13:00+00:00","dateModified":"2024-10-22T16:45:06+00:00","description":"Vue.js, un framework JavaScript progresivo, nos brinda herramientas poderosas para construir interfaces de usuario interactivas. Entre ellas, las","breadcrumb":{"@id":"https:\/\/pulpoline.com\/2024\/10\/18\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pulpoline.com\/2024\/10\/18\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pulpoline.com\/2024\/10\/18\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\/#primaryimage","url":"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Uso-de-Render-Functions-en-Vue-para-el-Desarrollo-de-Componentes.png","contentUrl":"https:\/\/pulpoline.com\/wp-content\/uploads\/2024\/10\/Uso-de-Render-Functions-en-Vue-para-el-Desarrollo-de-Componentes.png","width":1450,"height":753},{"@type":"BreadcrumbList","@id":"https:\/\/pulpoline.com\/2024\/10\/18\/uso-de-render-functions-en-vue-para-el-desarrollo-de-componentes\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/pulpoline.com\/"},{"@type":"ListItem","position":2,"name":"Uso de Render Functions en Vue para el Desarrollo de Componentes"}]},{"@type":"WebSite","@id":"https:\/\/pulpoline.com\/#website","url":"https:\/\/pulpoline.com\/","name":"PulpoLine","description":"","publisher":{"@id":"https:\/\/pulpoline.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pulpoline.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/pulpoline.com\/#organization","name":"PulpoLine","url":"https:\/\/pulpoline.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/pulpoline.com\/#\/schema\/logo\/image\/","url":"https:\/\/pulpoline.com\/wp-content\/uploads\/2021\/10\/Logo-PulpoLine-fondo-blanco-04.jpg","contentUrl":"https:\/\/pulpoline.com\/wp-content\/uploads\/2021\/10\/Logo-PulpoLine-fondo-blanco-04.jpg","width":990,"height":925,"caption":"PulpoLine"},"image":{"@id":"https:\/\/pulpoline.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/pulpoline"]},{"@type":"Person","@id":"https:\/\/pulpoline.com\/#\/schema\/person\/26d887f6a6655dae9a8e52598002dea6","name":"Hillary Amanda Quir\u00f3s Chavarr\u00eda","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/34ff8ec2488914a9254cbb658fb2e0549999bcddc40a182383935db50d09f181?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/34ff8ec2488914a9254cbb658fb2e0549999bcddc40a182383935db50d09f181?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/34ff8ec2488914a9254cbb658fb2e0549999bcddc40a182383935db50d09f181?s=96&d=mm&r=g","caption":"Hillary Amanda Quir\u00f3s Chavarr\u00eda"}}]}},"_links":{"self":[{"href":"https:\/\/pulpoline.com\/en\/wp-json\/wp\/v2\/posts\/6973","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pulpoline.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pulpoline.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pulpoline.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/pulpoline.com\/en\/wp-json\/wp\/v2\/comments?post=6973"}],"version-history":[{"count":7,"href":"https:\/\/pulpoline.com\/en\/wp-json\/wp\/v2\/posts\/6973\/revisions"}],"predecessor-version":[{"id":7037,"href":"https:\/\/pulpoline.com\/en\/wp-json\/wp\/v2\/posts\/6973\/revisions\/7037"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/pulpoline.com\/en\/wp-json\/wp\/v2\/media\/6991"}],"wp:attachment":[{"href":"https:\/\/pulpoline.com\/en\/wp-json\/wp\/v2\/media?parent=6973"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pulpoline.com\/en\/wp-json\/wp\/v2\/categories?post=6973"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pulpoline.com\/en\/wp-json\/wp\/v2\/tags?post=6973"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}