Vue 可重用的模態包裝器

Question

我想要一個模態包裝器，我可以將組件注入其中，因此模態負責諸如關閉之類的事情，但是注入的組件負責顯示的內容以及對數據的處理。 到目前為止，我有這個解決方案，

const Modal = namespace("Modal");

@Component 導出默認 class AppModal 擴展 Vue {

public component: any = null;

@Modal.State
public modalVisible!: boolean;
@Modal.State
public modalComponent!: string;

get injectedComponent() {
    return this.modalComponent;
}

@Modal.Mutation
public hideModal!: () => void

@Watch('injectedComponent')
onModalComponent(componentName: string) {
    if(!componentName) return;
    debugger;
    Vue.component(componentName, () => import(`./components/${componentName}`))
    this.component = componentName;
}

store 中的 showModal 方法，使 modalVisible 並獲取一個 componentName，我們監聽這個變化並導入組件，並使用動態組件將其注入到 modal 中。

<template>
<v-dialog v-model="modalVisible" class="muc-modal" max-width="350" persistent>
    
    <v-card>
        <component :is="modalComponent"/>
    </v-card>

</v-dialog>

無論我發送給觀察者的組件名稱，我都會收到以下錯誤，

未知的自定義元素：

就像它無法解析我想要發送到我的 AppModal 的組件。 我做錯了什么嗎？

Answer 1

要得到要工作，您必須導入並注冊您將在 prop:is="..." 中傳遞的所有組件。 因此，您的 modalComponent 必須對所有將被調用的組件進行導入和注冊

例如，如果您將交替使用組件 Comp1 和 Comp2，則您的 modalComponent 中應該有如下內容

import Comp1 from '<path-to-Comp1>
import Comp2 from '<path-to-Comp2>

@Component({
    components: {
        Comp1,
        Comp2,
    }
})
export default class AppModal extends Vue {
    ...
    ...
    ...
    <You fill in modalComponent with Comp1 or Comp2>
    ...
    ...
    ...
}

在您的模板中，您可以擁有

<component :is="modalComponent"/>

祝你好運。