搜索

首页  >  问答  >  正文

javascript - Vue2.0怎么在$on中更新data的数据啊

因为是非父子间的通信我按照网上的教程键了一个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指向错了,还是不改这样赋值的,试了好多种方法了,一脸懵

欧阳克欧阳克2754 天前644

全部回复(2)我来回复

  • 过去多啦不再A梦

    过去多啦不再A梦2017-06-12 09:27:46

    首先,你的mine.vue必须先初始化了,在$on('usermessage')后,相关代码触发$emit('usermessage'),才会接收到这个事件。按照你现在的代码,你在emit的时候,mine.vue根本就还没初始化,所以是监听不到这个事件的。
    然后,你的this指向没错,因为你用了箭头函数,详情可以看下箭头函数的this指向问题。(虽然不知道你this.msg是想干啥,明明data里面没有msg)
    另外你的思路是登录获取到用户信息后展示在mine.vue页面吧,建议你用vuex保存用户信息,这样就可以在其他页面拿到了

    回复
    0
  • 三叔

    三叔2017-06-12 09:27:46

    楼上正解;
    跳转到login的时候,mine这个组件会销毁了,你可以在destroyed那个生命周期打印点东西看看是不是。这样当你再次跳转到mine时,里面的内容就是重新初始化一遍的了,这样你打印出来的东西永远是刚初始化还没操作过的内容。

    回复
    0
  • 取消回复