Vue3 中如何为根组件传递 props？对比Vue2实现方案

你可以直接用和Vue2逻辑完全对齐的写法实现，不需要调整原有开发思路：

• 首先需要显式引入Vue3的渲染函数h，以及应用创建方法createApp
• createApp的第一个参数可以直接传入根配置对象，你原来Vue2中写在new Vue里的配置逻辑可以直接平移过来

完整实现代码 #

import { createApp, h } from 'vue';
import TopLevelComponent from './TopLevelComponent.vue';

// 外部启动时注入的配置，和原有用法完全一致
const someLocalConfig = { prop1: 'val1', /* 其他配置字段 */ };

const app = createApp({
  data() {
    return {};
  },
  // 直接平移原来的render逻辑，h需要从vue显式引入，不需要再作为render的形参传入
  render() {
    return h(TopLevelComponent, { props: someLocalConfig });
  }
});

// 后续正常挂载到DOM节点即可
app.mount('#app');

补充说明 #

• 你之前看到的createApp(TopLevelComponent)的写法是最简化的无额外配置的根组件挂载场景，如果需要给根组件传外部注入的初始props，就需要用上述带自定义render函数的写法。
• 这种带render的写法和你原有Vue2逻辑1:1匹配，没有额外学习成本，所有外部注入的配置会直接作为TopLevelComponent的props传入，完全符合原有使用习惯。
• 如果你不需要外层匿名根实例的其他逻辑，也可以通过app.provide的方式把配置注入给根组件，但这种方式属于依赖注入，不是严格的props传参，需要根据实际使用场景选择。

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