El siguiente caso: tengo una API que genera todo el contenido de mi página, así como su estructura, etc. generar contenido de páginas, que esa API entrega al front-end).
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 hacerlo, enfrentaría el problema de que tengo que agregar datos de propiedades a mis componentes de alguna manera, lo cual (por lo que pude ver) no se describe en la documentación de Vue. Así que ahora me pregunto cómo pasar accesorios a componentes dinámicos, que tienen accesorios completamente diferentes (el héroe podría tener una imagen, el formulario podría tener marcadores de posición de entrada, etc.). ¿Alguna idea?
Hoy en día es necesario indicar con qué versión de Vue trabajas.
Con Vue 2 podrías hacerlo así:
Vue.component('FirstComponent', { props: ['title', 'prop1_1'], template: ` <div> {{ title }}<br /> {{ prop1_1 }} </div> ` }) Vue.component('SecondComponent', { props: ['title', 'prop2_1', 'prop2_2'], template: ` <div> {{ title }}<br /> {{ prop2_1 }}<br /> {{ prop2_1 }} </div> ` }) new Vue({ el: "#app", data() { return { items: [ { component: 'FirstComponent', props: { title: 'First component title', prop1_1: 'this is prop 1_1' }, }, { component: 'SecondComponent', props: { title: 'Second component title', prop2_1: 'this is prop 2_1', prop2_2: 'this is prop 2_2', }, }, ] } }, template: ` <div> <component v-for="(item, idx) in items" :key="idx" :is="item.component" v-bind="item.props" ></component> </div> ` }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"></div>Eche un vistazo a v-bind https://vuejs.org/v2/guide/components-props.html#Passing-the-Properties-of-an-Object (igual que Vue 3).
Suponiendo que su API incluye una propiedad de props para cada componente, entonces haría esto:
<component v-for="item in content" :is="item.component" v-bind="item.props"></component>