将数据从路由器视图发送到 App.vue

Question

对于一个学校项目，我必须构建一个 vue js 应用程序。

我使用 emit 和 :v-on 从子组件交换数据和触发方法，效果很好！现在我想从子组件做同样的事情，那就是 vue。这意味着它是路由器显示的组件。

这是子组件：

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

和 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)
        }

我从孩子那里得到了日志：“logout child”，但我无法访问 App.vue 中的方法 logoutUser...“logout App.vue”日志永远不会显示...

你知道我做错了吗？我几乎是个菜鸟

谢谢！

Answer 1

您必须将 router-view 元素中的 v-on:logout 更改为 v-on:logoutUser，v-on 必须具有与 $emit 相同的值。你也可以用@而不是v-on来缩短你的代码：（所以@logoutUser="logoutUser")