使用$emit（）方法在Vue.js中将数据从子级传递到父级传递到父级

我无法使用vue.js将数据从子路由器传递到父路由器

从很少的研究（包括堆栈溢出）中可以看出，我们必须从子级使用$emit（）方法。 我在文档、stackoverflow和一些youtube教程之间游手好闲，但仍然有一些东西我错过了，我做错了

下面是我的路由器Menubar.vue

<template>
    <div id="app" class="container-fluid">
         <div @clicked="onClickChild">
            <p>login is set to {{ loggedin }}</p>
            <p>Route query login {{ this.$route.query.loggedin }}</p>
        </div>
        <div v-if="!loggedin">
            <nav>
                <!--<router-link class="btn btn-primary" to="/">Customers</router-link>-->
                <router-link class="btn btn-primary" to= "/menubar/login">Login</router-link>
                <router-link class="btn btn-primary" to="/menubar/register">Register</router-link>
            </nav>
        </div>
        <div v-else>
            <nav>
                <!--<router-link class="btn btn-primary" to="/">Customers</router-link>-->
                <button class="btn btn-primary" v-on:click="logout()">Logout</button>
                <router-link class="btn btn-primary" to="/edit">Edit</router-link>
            </nav>
        </div>

        <br/>
        <router-view/>
    </div>
</template>

<script>
    export default {
        name: "menubar",
        data(){
            return{
                loggedin:false,
            }
        },
        created() {
            if(this.$route.query.loggedin){
                this.loggedin = this.$route.query.loggedin;
            }
        },
        methods: {
            logout(){
                this.loggedin = false;
            },
            onClickChild (value) {
                this.loggedin = value;
                console.log(value) // someValue
            }
        }
    }
</script>

console.log应打印true或false以跟踪我的参数“loggedin” 相反，我不知道这是否有关联，我有： [HMR]正在等待来自WDS的更新信号

在我的mozilla浏览器中（与Chrome浏览器相同）：

地址不清楚 Firefox不知道如何打开此地址，因为以下>协议之一（查看源代码、网页包）与任何程序都没有关联，或者在此上下文中不允许。 您可能需要安装其他软件才能打开此地址。“

---

提前感谢您的帮助。

从您的代码来看，您的子组件似乎正在将事件正确地发送给父组件。对于您在浏览器中收到的错误，很可能是输入错误或错误的URL，正如您所做的：

        path: "/menubar",
        name: "menubar",
        component: Menubar,
        children: [
            {
                path: "/menubar/login",

---

这将生成一个类似于/menubar/menubar/login的路径，看起来是错误的。

在您的情况下，侦听事件的组件不是组件子级：

<div @clicked="onClickChild">[...]</div>

[…]

但是，如果您希望能够收听广播，那么这里的孩子是一个div 来自子组件的信号，侦听器应与此特定子组件相关联。在这种情况下，类似于：

<Login @clicked="onClickChild">[...]</Login>

[…]

但是，如果要将数据从子节点传递到路由器中的父节点 您可以定义路由器视图并捕获事件，如下所示：

<router-view @clicked="onClickChild" />

---

很好，我已经将子项更改为路径：“login”。它更干净，但不会改变行为：我仍然可以在子项和父项之间来回导航，并且不会传递任何参数

<Login @clicked="onClickChild">[...]</Login>

<router-view @clicked="onClickChild" />