Question

我试图用vue创建一个客户端登录，我有主要组件和嵌套是导航栏和呈现内容的组件在创建导航组件时，我会检查用户是否已记录以显示来宾的按钮并隐藏受保护部分的按钮我的问题是在我的登录组件上提交登录后，我不知道如何触发重新重新导航栏组件以显示正确的按钮

我不知道我的主要组件是否应该有一个全局变量，或者我是否必须找到一种方法从子组件向父组件发出事件，并从主组件向组件发出另一个事件酒吧或者可能更简单，但我不知道

如果您需要更多信息，请告诉我提前致谢

Answer 1

主要问题是如何在同一层次结构的组件之间建立通信，以解决我在Vue.js文档中描述的实现和事件总线方法：

https://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)
                }
            })
        }
    }
}

我可以在我的其他组件上监听触发事件，在create方法上设置监听器，如下所示：

// NavBar.js
export default {
     template: '<Navigation/>',
     name: 'navigation',
     data () {
         return {
             isLogged: this.checkIfIsLogged()
         }
     },
     created () {
         this.$bus.$on('logged', () => {
             this.isLogged = this.checkIfIsLogged()
         })
     }
 }

希望这可以作为参考

登录vuejs后重新渲染导航栏

1 个答案: