Vue.js 在另一个组件上使用带有自定义组件的Quasar对话框插件

我正在用类星体迈出第一步

我想构建一个模式窗口，以便在表单中重用

我正在自定义组件中使用对话框插件和q布局

但是，当我在另一个组件中使用这个自定义组件时，对话框插件方法不起作用

有什么办法解决这个问题吗

util/modal.js

import { Dialog } from "quasar";

export function ModalWindow(CustomComponent) {

    Dialog.create({
        component:CustomComponent,
        ok: {
            push: true
        },
        cancel: {
            color: 'negative'
        },
        persistent: true
    })
}

modal/ModalWindow.vue（自定义组件）：

---

我最近也犯了同样的错误

我的理解是，当你使用类似于：

Dialog.create({
组件：自定义组件，
...
})
//或
这是一个$q对话框({
组件：自定义组件
})

谢谢Matteo Piazza。不客气！提议的解决方案在我看来有点难看和重复，但到目前为止，我仍然需要找到一个更好的解决方案。也许使用混音器。。。或者新的合成api。。。以防a将在此处发布更新。

    <template>
       <q-dialog persistent ref="dialog" @hide="onDialogHide">
         <q-layout view="lhh LpR lff" container style="height: 400px" class="bg-grey-3">       

          <q-toolbar class="bg-primary text-white q-mb-sm">
            <q-toolbar-title>
                <slot name="titelWindow"></slot>
            </q-toolbar-title>
            <q-btn v-close-popup flat round dense icon="close" />
           </q-toolbar>

            <q-form @submit.prevent="submitForm">
                <q-card-section>   
                    <slot></slot>
                </q-card-section>  

                <q-card-actions align="right">
                    <slot name="toolbarBottom"></slot>
                </q-card-actions>
            </q-form>

    </q-layout>
  </q-dialog>
</template>

<script>
export default {
  methods: {
    show () {
      this.$refs.dialog.show()
    },
    hide () {
      this.$refs.dialog.hide()
    },
    onDialogHide () {
      this.$emit('hide')
    }
  }
}
</script>

<script>
    import { ModalWindow } from 'src/util/modal'
    import CustomComponent from "components/modal/MyModalWindow.vue"
    export default {    
        methods: {
            showUWin: function(id) {
                ModalWindow(CustomComponent)
            }
        }
    }
</script>

<template>
    <MyModalWindow>   
        <!--Dialog's show method doesn't work-->
    </MyModalWindow>  
</template>

<script>
export default {
    name: 'MyModalForm',
    components: {
        'MyModalWindow': require('components/modal/MyModalWindow.vue').default,
    }
}
</script>

<script>
    import { ModalWindow } from 'src/util/modal'
    import CustomComponent from "components/modal/MyModalForm.vue"
    export default {    
        methods: {
            showWin: function(id) {
                ModalWindow(CustomComponent)
            }
        }
    }
</script>

[Vue warn]: Error in mounted hook: "TypeError: this.$refs.dialog.show
is not a function"