Just have some basic understanding of dynamic components, but what if the component is complex or unique from each other, how should I manage emit, props, and slots in the parent component?
Let's say I have 3 components:
Component 1
<template>
<div class="app-container">
<spinner :color="this.colore"></spinner>
<slot></slot>
</div>
</template>
This deals with loading, where I need to pass a prop "color" and some buttons in the slot.
Component 2
<template>
<div class="app-container">
<form>
......
<button @click="onClick"></buttom>
</form>
</div>
</template>
method: {
onClick: function () {
this.$emit('form-submit');
}
}
This component does not have any props or slots, but it emits an event when the button is clicked.
Component 3
<template>
<div class="app-container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot></slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
</template>
This component is simply for displaying information. However, it has 3 different slots.
Now, in the parent view, how can I correctly use dynamic components?
<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;
}
}
I specifically need to pass props or replace slots for both comp1 and comp3. How can I properly implement the "switchToCompX" methods? And how do I handle the emit from comp2 since only comp2 will emit?