如何为 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 中执行此操作？

我读过我可以这样做：

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

const app = createApp(TopLevelComponent);

但是我怎样才能将someLocalConfig作为 app/top level 组件的props传入呢？

Answer 1

您可以使用第二个createApp参数来创建应用程序 - 这取代了做非常相似的事情的旧方法（ propsData ）

这是文档中的一个示例：

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

在您的情况下，具体而言：

const app = createApp(TopLevelComponent, someLocalConfig);

Answer 2

@Matt 答案的扩展。

如何在根组件中获取初始道具（Vue3、Typescript 和 Composition API）。

作者： https://v3.vuejs.org/api/composition-api.html#composition-api

import { defineComponent, Slots } from 'vue'

interface Data {
    [key: string]: unknown
}

interface SetupContext {
    attrs: Data
    slots: Slots
    emit: (event: string, ...args: unknown[]) => void
    expose: (exposed?: Record<string, any>) => void
}

export default defineComponent({
    setup (props: Data, context: SetupContext) {
        console.log(context.attrs.myProp)
    }
})

更短的选择

import { defineComponent, SetupContext } from 'vue'

export default defineComponent({
    setup (props: SetupContext['attrs'], { attrs }) {
        console.log(attrs.myProp)
    }
})