Vue 可重用的模态包装器答案

【问题标题】：Vue reusable modal wrapperVue 可重用的模态包装器
【发布时间】：2021-03-26 09:50:21
【问题描述】：

我想要一个模态包装器，我可以将组件注入其中，因此模态负责诸如关闭之类的事情，但是注入的组件负责显示的内容以及对数据的处理。到目前为止，我有这个解决方案，

const Modal = namespace("Modal");

@组件导出默认类 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 的组件。我做错了什么吗？

【问题讨论】：

为什么是 this.component = componentName，而不是 this.modalComponent= componentName？并且 ()=> import 返回promise，因此您可以在“then”子句中更新组件名称。

标签： javascript typescript vue.js vuex

【解决方案1】：

要让工作，您必须导入并注册您将在 prop :is="..." 中传递的所有组件。因此，您的 modalComponent 必须对所有将被调用的组件进行导入和注册

例如，如果您将交替使用组件 Comp1 和 Comp2，则您的模态组件中应该有如下内容

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"/>

祝你好运。

【讨论】：