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!
CodePudding user response:
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")