Передача данных от дочернего к родительскому к родительскому в Vue.js с помощью метода $emit()

Я не могу передавать данные от дочерних маршрутизаторов к родительским с помощью 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.info(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.info должен печатать 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."

Заранее спасибо за вашу помощь.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
4
0
1 794
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Судя по вашему коду, ваш дочерний компонент правильно передает событие родительскому компоненту. Для ошибки, которую вы получаете в браузере, это, вероятно, опечатка или неверный URL-адрес, как вы делаете:

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

Что создаст путь, подобный /menubar/menubar/login, который выглядит неправильно. https://router.vuejs.org/guide/essentials/nested-routes.html

Хорошо, я изменил детей на путь: «логин». Это чище, однако это не меняет поведение: я все еще могу переходить от дочернего к родительскому и обратно, и никакие параметры не передаются.

Charles Julien 08.04.2019 12:17
Ответ принят как подходящий

В вашем случае компонент, прослушивающий событие, не является дочерним компонентом:

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

Однако здесь дочерний элемент - это div, если вы хотите иметь возможность слушать излучение сигнал от дочернего компонента, прослушиватель должен быть связан с этим конкретным дочерним компонентом. В этом случае что-то вроде:

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

Однако, если вы хотите передать данные от дочернего к родительскому узлу в маршрутизаторе вы можете определить представление маршрутизатора и поймать событие следующим образом:

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

Другие вопросы по теме