emit data from a router view to the App.vue

Question

for a school project I have to build a vue js app.

I used emit and :v-on to exchange data and trigger methods from child component and it works great!, now I want to do the same thing from a child composant, that is a vue. That means it is a a component displayed by the router.

here is the child component:

methods: {
        logout () {
            console.log("logout child")
            this.$emit('logoutUser', this.user)
        }
},

and the app.vue:

<router-view v-if="this.user.isConnected && this.user.username != ''" :userProp="user" v-on:logout="logoutUser"></router-view>


[...]


logoutUser(user) {
            console.log("logout App.vue", user)
        }

I got the log from the child: "logout child", but I can't access the method logoutUser in App.vue... the "logout App.vue" log never show...

Do you know were I did a mistake? I'm pretty much a noob

Thanks!

Rafter

You are listening for logout event instead of logoutUser – Gherardo

Answer 1

You have to change your v-on:logout in the router-view element to v-on:logoutUser, the v-on has to have the same value the $emit has. Also you could shorten your code a little with using @ instead of v-on: (so @logoutUser="logoutUser")

Cupidity

This, but logout-user as the name; don't use camelCase on event names: vuejs.org/v2/guide/components-custom-events.html#Event-Names – Horal