如何在传递带Props的Vue组件时适配要求返回Component的接口

不用把Props移到全局状态，有两种直接的方法可以给传入第三方函数的组件预设Props：

1. 创建包装组件 #

写一个轻量的包装组件，在内部渲染目标组件并绑定好需要的Props，然后把这个包装组件传给第三方函数：

import { h } from 'vue';
import MyComponent from './MyComponent.vue';

// 定义包装组件
const WrappedMyComponent = {
  render() {
    // 在这里传入预设的Props
    return h(MyComponent, { greeting: '你好，预设内容' });
  }
};

// 传给第三方函数
doSomething3rdParty(WrappedMyComponent);

如果需要复用，也可以把包装组件写成单独的.vue文件，逻辑更清晰：

<!-- WrappedMyComponent.vue -->
<script setup>
import MyComponent from './MyComponent.vue';
</script>

<template>
  <MyComponent greeting="你好，预设内容" />
</template>

然后导入这个包装组件传给第三方函数即可。

2. 直接用渲染函数生成组件选项 #

如果不需要单独文件，也可以直接在调用时生成带预设Props的组件选项：

import { h } from 'vue';
import MyComponent from './MyComponent.vue';

doSomething3rdParty({
  render() {
    return h(MyComponent, { greeting: '直接预设的Props' });
  }
});

原理说明 #

第三方函数要求的Component类型是组件定义，而不是组件实例。通过包装组件的方式，我们把预设的Props固化到了新的组件定义里，当第三方函数渲染这个组件时，会自动使用我们预设的Props，完全不需要依赖全局状态。

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