[Vuejs]-Vue3, How to use dynamic component in tsx

by

0👍

✅

<component is="*****" ></component> will not work using JSX.

instead you can just pass the component itself

import Comp1 from "./Comp1.vue";

export default defineComponent({

  setup(props) {
    return () => (
      <n-form>
        {list.value.map(item => {
          const MyComponent = Comp1;
          return (
            <n-form-item>

                <MyComponent/>

            </n-form-item>
          );
        })}
      </n-form>
    );
  }
})

of course, using const MyComponent = Comp1; is not exactly dynamic, but you can replace that with a lookup like

import Comp1 from "./Comp1.vue";
import Comp2 from "./Comp2.vue";
import Comp3 from "./Comp3.vue";
cons componentDefs = {
   "comp-1": Comp1,
   "comp-2": Comp2,
   "comp-3": Comp3,
}

and then you can look them up with

const MyComponent = componentDefs[*******];

Leave a comment