使用方法 $emit() 将数据从 child 传递到 parent 再到 Vue.js 中的 parent

Question

我无法通过 vue.js.

将数据从 child 传递到 parent 路由器

根据一些研究，包括堆栈溢出，很明显我们必须使用 child 中的 $emit() 方法。我在文档、Whosebug 和一些 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>

及其childLogin.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 中相同）：

The address wasn’t understood Firefox doesn’t know how to open this address, because one of the following > protocols (view-source, webpack) isn’t associated with any program or is not allowed in this context. You might need to install other software to open this address."

在此先感谢您的帮助。

Answer 1

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

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

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

Answer 2

在你的例子中，监听事件的组件不是组件child:

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

这里的 child 是一个 div，然而，如果你想能够听到一个 emit 来自 child 组件的信号，监听器应该与这个特定的 child 组件相关联。在这种情况下是这样的：

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

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

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

使用方法 $emit() 将数据从 child 传递到 parent 再到 Vue.js 中的 parent

Passing data from child to parent to parent in Vue.js with method $emit()

parent-child

vue.js