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

Question

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

我使用 emit 和 :v-on 从 child 组件交换数据和触发方法，效果很好！现在我想从 child 组件做同样的事情, 那是一个 vue.也就是说它是路由器显示的一个组件。

这里是 child 组件：

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

我从 child 获得日志：“注销 child”，但我无法访问 App.vue 中的方法 logoutUser...“注销 App.vue" 日志从不显示...

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

谢谢！

Answer 1

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

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

emit data from a router view to the App.vue

javascript

parent-child

emit

vue.js

vuejs2