Question

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

我的router.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不知道如何打开此地址，因为以下>协议之一（视图源，Webpack）未与任何程序关联，或者在此情况下是不允许的。您可能需要安装其他软件才能打开此地址。”

预先感谢您的帮助。

Answer 1

In your case, the component listening to the event is not a component child:

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

Here the child is a div, however, if you want to be able to listen to an emit signal from a child component, the listener should be associated with this specific child component. In this case something like:

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

However, if you want to pass data from a child to a parent node in the router you can define a router-view and catch the event like so:

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

Answer 2

从您的代码看来，您的子组件正在正确地将事件发送给父组件。对于您在浏览器中收到的错误，可能是输入错误或网址错误，就像您所做的那样：

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

这将产生类似于/ menubar / menubar / login的路径，看起来很错误。 https://router.vuejs.org/guide/essentials/nested-routes.html

使用方法$ emit（）

2 个答案: