I want to use emit to switch between page components - vue.js

Question

I have a Header and a Main page on Top page now, and I have three Tab functions in the Header component. I want to switch displays(A, B, C) in the Main page when I press each Tab (A, B, C). I am trying to change it using Emit but it doesn't work. If you could give me some advice, I really appreciate it.
Header.vue
<script setup >
const tabs = [
{name: 'A', comp: A},
{name: 'B', comp: B},
{name: 'C', comp: C}
];
interface Emits {
(e: "clicked", value: any);
}
const clicked = defineEmits<Emits>();
</script>
<template>
<div class="tabs" >
<button v-bind:class="['tab-button', A]" #click="$emit('clickedA',tabs[0])">A</button>
<button v-bind:class="['tab-button', B]" #click="$emit('clickedB',tabs[1])">B</button>
<button v-bind:class="['tab-button', C]" #click="$emit('clickedC',tabs[2])">C</button>
</div>
</template>
Mainpage.vue
<script>
let currentTab = A
function getValue(event) {
currentTab = event
}
</ script>
<template>
<Header />
<div>
<component :is="currentTab" #clicked="getValue"></component>
</div>
</template>

Answer 1

I would have the 3 buttons all call the same emit method, passing in the component String as a parameter of that emit:
<button v-bind:class="['tab-button']"
#click="$emit('myClicked', tabs[0])">
A
</button>
<button v-bind:class="['tab-button']"
#click="$emit('myClicked', tabs[1])">
B
</button>
<button v-bind:class="['tab-button']"
#click="$emit('myClicked', tabs[2])">
C
</button>
Then, in the parent component, you could listen for that emit and that one alone:
<Header #myClicked="getValue" />
and in script:
function getValue(tab) {
currentTab.value = tab.name;
}
For example:
Mainpage.vue
<template>
<div>
<Header #myClicked="getValue" />
<div>
<component :is="currentTab"></component>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import Header from "./Header.vue";
let currentTab = ref("A");
function getValue(tab) {
currentTab.value = tab.name;
}
function getTab(tab) {
currentTab.value = tab.name;
}
</script>
Header.vue
<script setup>
const tabs = [{ name: "A" }, { name: "B" }, { name: "C" }];
const emit = defineEmits(["myClicked"]);
</script>
<template>
<div class="tabs">
<button v-bind:class="['tab-button']"
#click="$emit('myClicked', tabs[0])">
A
</button>
<button v-bind:class="['tab-button']"
#click="$emit('myClicked', tabs[1])">
B
</button>
<button v-bind:class="['tab-button']"
#click="$emit('myClicked', tabs[2])">
C
</button>
</div>
</template>
A, B, and C.vue:
<template>
<h2>Component A</h2>
</template>
<template>
<h2>Component B</h2>
</template>
<template>
<h2>Component C</h2>
</template>
main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'
import A from "./components/A.vue";
import B from "./components/B.vue";
import C from "./components/C.vue";
const app = createApp(App);
app.component("A", A);
app.component("B", B);
app.component("C", C);
app.mount('#app')
OCD cleaning up code a little more.
Using v-for in the Header.vue file to simplify the creation of buttons, and passing the name field into the emit's method parameter changes the following vue files:
Header.vue
<script setup>
const tabs = [
// assuming that in "real" code,
// the display name and component name values would likely be different
{ name: "A", compName: "A" },
{ name: "B", compName: "B" },
{ name: "C", compName: "C" },
];
const emit = defineEmits(["myClicked"]);
</script>
<template>
<div class="tabs">
<button
v-for="tab in tabs"
:key="tab.name"
#click="$emit('myClicked', tab.compName)"
>
{{ tab.name }}
</button>
</div>
</template>
Mainpage.vue
<template>
<div>
<Header #myClicked="getValue" />
<div>
<component :is="currentTab"></component>
</div>
</div>
</template>
<script setup>
import { ref } from "vue";
import Header from "./Header.vue";
let currentTab = ref("A");
function getValue(tabName) {
currentTab.value = tabName;
}
function getTab(tab) {
currentTab.value = tab.name;
}
</script>