我正在尝试使用 vue 创建客户端登录,我有主要组件,嵌套的是导航栏和呈现内容的组件 在创建导航组件时,我检查用户是否登录以显示访客按钮并隐藏 protected 部分的按钮 我的问题是在我的登录组件上提交登录后,我不知道如何触发导航栏组件的重新渲染以显示正确的按钮
我不知道我是否应该在我的主要组件上有一个全局变量,或者我是否应该找到一种方法从 child 向父亲发出一个事件,然后从主要组件向导航栏发出另一个事件,或者也许更简单,但我不知道
如果您需要更多信息,请告诉我 提前致谢
最佳答案
主要问题是如何在同一层次结构的组件之间建立通信,为了解决这个问题,我实现了 Vue.js 文档中描述的事件总线方法:
https://v2.vuejs.org/v2/guide/components.html#Non-Parent-Child-Communication
我刚刚创建了一个名为 EventBus 的新 Vue 实例
// EventBus.js
import Vue from 'vue'
export default new Vue()
然后我将其全局包含在我的主 Vue 实例中
// main.js
import EventBus from './EventBus'
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
Vue.prototype.$bus = EventBus
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
有了这个,我可以在我的组件上发出事件,并在具有相同层次结构的其他组件上监听它们,如下所示:
// Login.Vue
import axios from 'axios'
export default {
name: 'login',
data () {
let data = {
form: {
email: '',
password: ''
}
}
return data
},
methods: {
login () {
axios.post('http://rea.app/login', this.form)
.then(response => {
let responseData = response.data.data
this.$localStorage.set('access_token', responseData.token)
this.$bus.$emit('logged', 'User logged')
this.$router.push('/')
})
.catch(error => {
if (error.response) {
console.log(error.response.data)
console.log(error.response.status)
console.log(error.response.headers)
}
})
}
}
}
我可以在我的其他组件上监听触发事件,在创建方法上设置监听器,如下所示:
// NavBar.js
export default {
template: '<Navigation/>',
name: 'navigation',
data () {
return {
isLogged: this.checkIfIsLogged()
}
},
created () {
this.$bus.$on('logged', () => {
this.isLogged = this.checkIfIsLogged()
})
}
}
希望可以作为引用
关于javascript - 在vuejs上登录后重新渲染导航栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44185498/