Passing parameters in $emit is undefined

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"