在 Vue.js 中使用 $emit() 方法将数据从子级传递到父级到父级答案

【问题标题】：Passing data from child to parent to parent in Vue.js with method $emit()在 Vue.js 中使用 $emit() 方法将数据从子级传递到父级到父级
【发布时间】：2019-08-28 16:23:32
【问题描述】：

我无法使用 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>

及其子Login.vue

<template>
    <div class="submitform">
        <div class="form-group">
            <label for="username">Username</label>
            <input type="text" class="form-control" id="username" required v-model="user.username" name="username">
        </div>

        <div class="form-group">
            <label for="password">Password</label>
            <input type="password" class="form-control" id="password" required v-model="user.password" name="password">
        </div>

        <button v-on:click="logUser()" class="btn btn-success">Connect</button>
</template>

<script>
    import router from '../../router'

    export default {
        name: "login",
        data(){
            return{
                user: {
                    id: 0,
                    username: "",
                    password: ""
                },
            }
        },
        methods:{
            logUser(){
                var loggedin = true;
                this.$emit('clicked', loggedin);
                router.push({ name: "menubar" });
            }
        }
    }
</script>

我的路由器.js

{
        path: "/menubar",
        name: "menubar",
        component: Menubar,
        children: [
            {
                path: "login",
                name: "login",
                component: Login,
            },
            {
                path: "register",
                name: "register",
                component: Register,
            }
        ]
    }

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

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

地址不被理解 Firefox 不知道如何打开此地址，因为以下协议之一（view-source、webpack）与任何程序无关或在此上下文中是不允许的。您可能需要安装其他软件才能打开此地址。”

提前感谢您的帮助。

【问题讨论】：

标签： vue.js parent-child

【解决方案1】：

从您的代码看来，您的子组件正在正确地向父组件发出事件。对于您在浏览器中收到的错误，可能是拼写错误或错误的 URL，正如您所做的那样：

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

这会产生像 /menubar/menubar/login 这样看起来错误的路径。 https://router.vuejs.org/guide/essentials/nested-routes.html

【讨论】：

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

【解决方案2】：

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

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

这里的孩子是一个 div，但是，如果你想能够听到一个发射来自子组件的信号，监听器应该与这个特定的子组件相关联。在这种情况下，类似于：

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

但是，如果您想将数据从子节点传递到路由器中的父节点您可以定义一个路由器视图并像这样捕获事件：

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

【讨论】：