Я не могу передавать данные от дочерних маршрутизаторов к родительским с помощью 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."
Заранее спасибо за вашу помощь.
Судя по вашему коду, ваш дочерний компонент правильно передает событие родительскому компоненту. Для ошибки, которую вы получаете в браузере, это, вероятно, опечатка или неверный URL-адрес, как вы делаете:
path: "/menubar",
name: "menubar",
component: Menubar,
children: [
{
path: "/menubar/login",
Что создаст путь, подобный /menubar/menubar/login, который выглядит неправильно. https://router.vuejs.org/guide/essentials/nested-routes.html
В вашем случае компонент, прослушивающий событие, не является дочерним компонентом:
<div @clicked = "onClickChild">[...]</div>
Однако здесь дочерний элемент - это div, если вы хотите иметь возможность слушать излучение сигнал от дочернего компонента, прослушиватель должен быть связан с этим конкретным дочерним компонентом. В этом случае что-то вроде:
<Login @clicked = "onClickChild">[...]</Login>
Однако, если вы хотите передать данные от дочернего к родительскому узлу в маршрутизаторе вы можете определить представление маршрутизатора и поймать событие следующим образом:
<router-view @clicked = "onClickChild" />
Хорошо, я изменил детей на путь: «логин». Это чище, однако это не меняет поведение: я все еще могу переходить от дочернего к родительскому и обратно, и никакие параметры не передаются.