Vue动态组件，如何处理不同的发射和通过道具并替换不同的插槽？

问题描述

只知道一些有关动态组件的基本知识，但是如果组件复杂或彼此不同，如何处理父组件中的发射，道具和插槽呢？

假设我有3个组成部分：

组件1

<template>
    <div class="app-container">
        <spinner :color="this.colore"></spinner>
        <slot></slot>
    </div>
</template>

这与加载有关，我需要传递一个道具“ color”和插槽中的一些按钮。

组件2

<template>
    <div class="app-container">
        <form>
            ......
            <button @click="onClick"></buttom>
        </form>
    </div>
</template>

method: {
    onClick: function () {
        this.$emit('form-submit');
    }
}

该组件没有任何道具或插槽，但是单击按钮时会发出辐射。

组件3

<template>
    <div class="app-container">
        <header>
            <slot name="header"></slot>
        </header>
        <main>
            <slot></slot>
        </main>
        <footer>
            <slot name="footer"></slot>
        </footer>
    </div>
</template>

此组件即将显示信息。但是有3个不同的插槽。

最后，在父视图中，如果我想使用动态组件，正确的方法是什么？

<template>
    <div class="homepage">
        <header></header>
        <keep-alive>
            <component :is="currentComp"/>
        </keep-alive>
    </div>
</template>

@Component({
    components: {
        Component1,Component2,Component3,},})

export default class HomepageView extends Vue {

    public currentComp: VueConstructor = Component1;
    
    public switchToComp1: void {
        currentComp = Component1;
    }

    public switchToComp2: void {
        currentComp = Component2;
    }

    public switchToComp3: void {
        currentComp = Component3;
    }

}

我的意思是说comp1和comp3都需要传递道具或替换插槽。 switchToCompX方法，如何以正确的方式对其进行补充？以及如何接收来自comp2的发射，因为只有comp2会发射。

解决方法

道具和事件都可以使用对象进行传递，因此您可以将该对象保留在data中，并以与切换活动组件相同的方式切换内容

<button v-on="{ mousedown: doThis,mouseup: doThat }"></button>
<div v-bind="{ id: someProp,'other-attr': otherProp }"></div>

必须在模板中定义插槽，因此唯一的方法可能是全部定义它们，并使用v-if仅激活活动组件所需的插槽...

无论如何，在这种简单情况下，使用v-if代替动态组件会容易得多