Passing parameters in $emit is undefined - vue.js

Question

I am trying to pass parameters using $emit. to filter out my routes in my parent component. It is not working and on the console, this.$emit() returns undefined. Why is that?
This is my Home.vue
<template>
<div v-if="isLoggedIn">
<h1 style="text-align: center;">Home {{role}}</h1>
</div>
<div v-else style="margin: 0 auto;">
<div>Username: <input type="text" v-model="username" /></div>
<div>Password: <input type="password" v-model="password" /></div>
<button #click="handleLogin()">Login</button>
</div>
</template>
<script>
export default {
component: SurveyBox,
name: 'HomeUser',
props: {
role: String,
},
data() {
return {
isLoggedIn: false,
}
},
methods: {
handleLogin: function(){
if(this.username != '' && this.password != ''){
if (this.username == 'Lucky' && this.password == 'test') {
this.isLoggedIn = true;
this.$router.replace('/');
this.$emit("Lucky", true)
console.log(this.$emit("Lucky", true))
}else if (this.username == 'Dan' && this.password == 'test') {
this.isLoggedIn = true;
this.$router.replace('/');
this.$emit("Dan", true)
console.log(this.$emit("Dan", true))
}else if(this.username == 'Admin' && this.password == 'admin'){
this.isLoggedIn = true;
this.$router.replace('/')
this.$emit("Admin", true)
console.log(this.$emit("Admin", true))
}
}else{
console.log(this.$parent)
}
}
},
}
</script>
As you can see this: console.log(this.$emit("Lucky", true)) returns an error. I just want to pass ("Lucky", true) to my parent component, so I can filter out the links that will show on my routes.
This is my App.vue
<template>
<div style="display: flex; flex-direction: row; width: 100%; height: 100%;">
<div v-if="openNavbar" class="sidenav" style="">
<h1 #click="openNavbar = !openNavbar"><u>=</u></h1>
<p><router-link to="/">Home</router-link></p>
<p><router-link to="/find-user">Find User</router-link></p>
<p v-if="Lucky"><FirstLinkRouter/></p>
<p v-else-if="Dan"><SecondLinkRouter/></p>
<p v-else-if="Admin"><AdminLinkRouter/></p>
</div>
<div v-else style="">
<h1 #click="openNavbar = !openNavbar"><u>=</u></h1>
</div>
<div style="position: relative;">
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {
data() {
return {
component: [FirstLinkRouter, SecondLinkRouter, AdminLinkRouter],
openNavbar: false,
Lucky: false,
Dan: false,
Admin: false,
}
},
}
</script>

Answer 1

Observation : In your app.vue component, I did not see any code to listen the event from the child, instead of that you declared three data properties Lucky, Dan & Admin.
First you have to understand how to listen the events passing from the child component into parent. Ways to listening the events in parent :
In script :
created() {
this.$on('Lucky', value => {
console.log(value);
});
}
--- OR ---
In template :
v-on:Lucky="doSomething"