Componentes Renderless en Vuejs 2

Los componentes Renderless en Vuejs 2 nos permiten escribir la lógica de éstos con la posibilidad de modificar la template de forma dinámica.

Esta forma de definir componentes puede ser especialmente útil en 2 casos muy claros:

(1) Permitir al usuario final definir el aspecto del componente.

(2) Construir componentes similares reutilizando mucho código.


Aquí vamos a ver un par de ejemplos de uso para entender cómo funcionan para que de aquí en adelante tengas la posibilidad de definir los tuyos propios para tus proyectos.

Lo primero que debemos saber de los componentes Renderless en Vuejs 2 es que éstos no definen el Html, el Html se define al momento de utilizarlo haciendo uso de slot-scope.

Componente Renderless básico

Vamos a comenzar con un ejemplo muy básico de un componente Renderless en Vuejs 2 para entender qué podemos hacer gracias a ellos.

 

Así queda mucho más claro, esa es la idea, definir valores para tenerlos disponibles en el componente al momento de utilizarlo.

Aunque es cierto que esto funciona, también es cierto que es bastante estático, para solucionarlo, vamos a crear una lista de tareas utilizando componentes Renderless.

Lista de tareas con componentes Renderless

Este ejemplo será una lista de tareas con un input y un bucle para mostrar las tareas que vayamos generando.

 

props: [‘value’]: datos que le vamos a pasar al componente haciendo uso de v-model al momento de utilizarlo.

Para utilizar nuestro componente simplemente debemos hacer lo siguiente:

Accedemos a toda la información de nuestro componente haciendo uso de slot-scope y utilizamos los eventos y los datos que hemos definido en nuestro componente RenderLessListTodos para dar de alta y eliminar tareas .

Te invito a que estudies este último trozo de código, verás que todo es muy simple y tiene todo el sentido del mundo.

Cursosdesarrolloweb ©. Todos los derechos reservados.

Login

Create an Account Back to login/register