Installieren Sie Quasar Dialog unter der Stammkomponente oder der übergeordneten Komponente: Wie geht das?

Question

Der dynamisch erstellte Dialog wird standardmäßig unter dem Tag <body> gemountet, sodass die globalen Funktionen Provide und Inject nicht verwendet werden können. Wie mounte ich Dialog unter div#app oder unter parent?

P粉561438407 · Answer

您可以使用 app.provide() 在 Vue app 上设置提供而不是组件。例如在入口脚本中

import { createApp } from 'vue'
import { Quasar, Dialog } from 'quasar'
import App from './App.vue'
createApp(App)
    .provide('name', value)
    .use(Quasar, {
        plugins: {
            Dialog,
        }
    })
    .mount('#app')

然后，您将能够在 Quasar 对话框子项中使用 inject() 相同的项目，即使该对话框安装在下。

P粉018653751 · Answer

它总是安装在（非 SSR）下或无处安装（SSR 模式） - 不仅仅是“默认情况下”。只需查看来源 - https://github.com/quasarframework/quasar/blob/dev/ui/src/utils/private/global-nodes.js#L6