如何在JS文件函数中传入Props引入Vue3组件？

你导入的Vue组件是组件定义对象（Vue2里是选项对象，Vue3里是defineComponent返回的对象），不是可直接调用的函数，所以Component('propvalue')这种写法不符合Vue的组件使用规范，自然无法生效。

根据你的使用场景，有两种常用的正确方式：

1. 用渲染函数创建带props的组件实例 #

如果你的函数是用于生成可渲染的组件节点（比如在自定义渲染逻辑、动态组件场景中），可以使用Vue的渲染函数API：

Vue3 示例 #

import { h } from 'vue'
import Component from './component.vue'

function myFunction() {
  // h(组件, props对象, 子节点)
  return h(Component, { propName: 'propvalue' })
}

Vue2 示例 #

import Component from './component.vue'

function myFunction() {
  // createElement(组件, 选项对象, 子节点)，props要放在props字段里
  return Vue.createElement(Component, { props: { propName: 'propvalue' } })
}

2. 包装成预设props的新组件 #

如果需要返回一个自带默认props的组件定义（比如用于路由配置、全局注册等场景），可以创建一个包装组件：

Vue3 示例 #

import { defineComponent, h } from 'vue'
import Component from './component.vue'

function myFunction() {
  return defineComponent({
    render() {
      return h(Component, { propName: 'propvalue' })
    }
  })
}

Vue2 示例 #

import Component from './component.vue'

function myFunction() {
  return {
    render(createElement) {
      return createElement(Component, { props: { propName: 'propvalue' } })
    }
  }
}

内容的提问来源于stack exchange，提问作者gespinha