Forma elegante de utilizar componentes dinámicos con propiedades en Vue

Caso siguiente: Tengo una API que devuelve todo el contenido para mi Página, así como su estructura, y demás (para una mejor comprensión, imagina un CMS que incluye una especie de generador de páginas, donde un autor puede colocar componentes arrastrando y soltando para generar el contenido de las páginas, que es entregado al frontend por esa api).

La estructura de la salida de la api se vería así:

{ content: [ { component: hero, content: {...} }, { component: form, content: {...} }, ... ]}

Entonces, para generar contenido relacionado, pensaría en usar componentes dinámicos como:

<template v-for="item in content"> <component :is="item.component" /> </template>

Sin embargo, al hacer esto, me enfrentaría al problema de que tengo que agregar propiedades de datos a mis componentes de alguna manera, lo cual (según pude ver) no está descrito en la documentación de Vue. Ahora me pregunto cómo pasar propiedades a componentes dinámicos que tienen propiedades completamente diferentes (por ejemplo, el componente hero podría tener una imagen, el componente form podría tener marcadores de posición para los campos de entrada, etc.) – ¿alguna idea?

davy.ai

August 1, 2023 at 7:41 pm

Para pasar props a componentes dinámicos en Vue.js, puedes usar la directiva v-bind para enlazar dinámicamente datos al componente.

Por ejemplo, supongamos que el componente “hero” tiene una prop “image”, y el componente “form” tiene una prop “inputPlaceholders”. Puedes pasar estas props a los componentes de la siguiente manera:

<template v-for="item in content">
  <component :is="item.component" v-bind="item.content"></component>
</template>

Esto enlazará el objeto “content” dentro de cada elemento en el array “content” de la respuesta de la API al componente dinámico correspondiente, pasando cualquier prop que esté presente en el objeto.

Así que si tu respuesta de la API se ve así:

{content: [
  {component: hero, content: {image: 'path/to/image.jpg'} },
  {component: form, content: {inputPlaceholders: ['Name', 'Email', 'Message']} },
  ...
]}

Los componentes dinámicos recibirán las siguientes props:

El componente “hero” recibirá una prop “image” con el valor “path/to/image.jpg”
El componente “form” recibirá una prop “inputPlaceholders” con un array de valores [“Name”, “Email”, “Message”]

Answer

davy.ai

August 1, 2023 at 7:41 pm
Para pasar props a componentes dinámicos en Vue.js, puedes usar la directiva v-bind para enlazar dinámicamente datos al componente.

Por ejemplo, supongamos que el componente “hero” tiene una prop “image”, y el componente “form” tiene una prop “inputPlaceholders”. Puedes pasar estas props a los componentes de la siguiente manera:
```
<template v-for="item in content">
  <component :is="item.component" v-bind="item.content"></component>
</template>
```
Esto enlazará el objeto “content” dentro de cada elemento en el array “content” de la respuesta de la API al componente dinámico correspondiente, pasando cualquier prop que esté presente en el objeto.

Así que si tu respuesta de la API se ve así:
```
{content: [
  {component: hero, content: {image: 'path/to/image.jpg'} },
  {component: form, content: {inputPlaceholders: ['Name', 'Email', 'Message']} },
  ...
]}
```
Los componentes dinámicos recibirán las siguientes props:
- El componente “hero” recibirá una prop “image” con el valor “path/to/image.jpg”
- El componente “form” recibirá una prop “inputPlaceholders” con un array de valores [“Name”, “Email”, “Message”]

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Forma elegante de utilizar componentes dinámicos con propiedades en Vue

Answer

davy.ai