如何在 Vue3 中为根组件提供道具

Question

在 Vue2 中可以这样做：

import TopLevelComponent from './TopLevelComponent.vue';

// const someLocalConfig = { prop1: 'val1', ... };

const app = new Vue({
  data() { return {}; },
  render: h => h(TopLevelComponent, {props: someLocalConfig})
});

这为您提供了一种在通过从其他地方注入配置来启动应用程序时将单个文件组件用于根组件的方法。

如何在 Vue3 中做到这一点？

我有 read 我可以做到这一点：

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

const app = createApp(TopLevelComponent);

但是我怎样才能将someLocalConfig 作为应用程序/顶级组件的 props 传递？

Answer 1

您可以使用 createApp 的第二个对象参数来实现 - 这取代了做非常相似的事情的旧方法 (propsData)

这是来自docs 的示例：

const app = createApp(
  {
    props: ['username'],
    template: '<div>{{ username }}</div>'
  },
  { username: 'Evan' }
)

在你的情况下：

const app = createApp(TopLevelComponent, someLocalConfig);