import vue 3 component into a JS file with props

Question

I have a JS file that holds a function and I want to import a vue component with respective props into that function.

I've imported the component like this:

import Component from './component.vue'

The vue component is imported successfully if I just do this:

function myFunction(){
  return Component
}

But not if I try to enter a value for a prop like this:

function myFunction(){
  return Component('propvalue')
}

Answer 1

Component props are actualized during rendering, so return a wrapper functional component with needed props:

import {h} from 'vue';
function myFunction(){
  return () => h(Component, {prop: 'propvalue'});
}