javascript - Vue2.0怎麼在$on中更新data的資料啊
欧阳克
欧阳克 2017-06-12 09:25:46
0
2
622

因為是非父子間的通訊我依照網路上的教學鍵了一個bus.js檔案
import Vue from 'vue'
export default new Vue()

第一個元件login.vue用來$emit
this.usermsg是一個物件

 bus.$emit('usermessage', this.usermsg)
 this.$router.push({name: 'mine'})
 

第一個元件mine.vue用來$emit
data() {

  return {
    userData: {},
  }
},
created() {
  bus.$on('usermessage', (usermsg) => {
    console.log(this.msg)
    console.log(usermsg.name)
    this.userData= usermsg
    console.log('mine接收到的usermsg')
    console.log(this.userData)
  })
  
  mounted() {
  console.log(this.userData)
  }

userData的資料不會發現變化,賦值不生效。是this指向錯了,還是不改這樣賦值的,試了好多種方法了,一臉懵

欧阳克
欧阳克

温故而知新,可以为师矣。 博客:www.ouyangke.com

全部回覆(2)
过去多啦不再A梦

首先,你的mine.vue必須先初始化了,在$on('usermessage')後,相關程式碼觸發$emit('usermessage'),才會接收到這個事件。照你現在的程式碼,你在emit的時候,mine.vue根本還沒初始化,所以是監聽不到這個事件的。
然後,你的this指向沒錯,因為你用了箭頭函數,詳情可以看下箭頭函數的this指向問題。 (雖然不知道你this.msg是想幹啥,明明data裡面沒有msg)
另外你的思路是登錄獲取到用戶信息後展示在mine.vue頁面吧,建議你用vuex保存用戶信息,這樣就可以在其他頁面拿到了

三叔

樓上正解;
跳到login的時候,mine這個組件會銷毀了,你可以在destroyed那個生命週期打印點東西看看是不是。這樣當你再次跳到mine時,裡面的內容就是重新初始化一遍的了,這樣你印出來的東西永遠是剛初始化還沒操作過的內容。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板