首先我們假設，這里的登錄組件（register.vue）是App.vue組件的子組件，是通過路由進入登錄組件的。
登錄組件中用戶點擊登錄后，后臺會傳過來一個用戶名，我的App.vue組件中需要拿到這個用戶名，并將上面的“登錄注冊”字樣變為“用戶名”。
為了保證用戶刷新后用戶名不會消失，這里我用到了sessionStorage
代碼如下:
register.vue中用戶點擊登錄觸發signIn方法
signIn(){ this.formData = $(".form").serialize(); var that = this; this.$http.get("/api/user", this.formData) .then(response => { that.userName = response.data.data.user.userName; that.userHead = response.data.data.userHead; that.$emit('userSignIn', that.userName); }) .catch(error => { console.log(error); }); }這里為了測試我直接mock的數據，真實情況應該是this.$http.post
這里的重點是那句
that.$emit('userSignIn', that.userName);向父組件（App.vue）傳值
App.vue代碼HTML
<keep-alive> <router-view @userSignIn="userSignIn"></router-view></keep-alive>
App.vue代碼JS
export default { data(){ return{ userName: sessionStorage.userName } }, methods:{ //子組件(register)將用戶名傳過來 userSignIn(userName){ sessionStorage.userName = userName; this.userName = sessionStorage.userName; } }}這樣父組件就可以使用用戶名，保持了登錄狀態，并且因為使用了sessionStorage，刷新頁面也可以保持。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
