在Vue项目中子组件创建时给data对象赋值后,在挂载方法内或创建方法内传值给父组件时显示未赋值?

最近在练习前后端分离时前端通过token请求后端数据时遇到的一个问题,前端用的是Vue+ElementUi框架开发的,但是在父子组件传值时,出现了父组件获取不到子组件初始化后的值的问题,恳请大佬能够帮忙解答一下!!

 

我的需求是在子组件创建时,将后台返回的数据赋值给current_user,然后在将数据传给父组件,这样父组件就不用再请求一遍后台了,但是第一次这样写后,不知道为什么父组件获取到的数据是子组件未赋值时的数据。但是页面上子组件内的数据还是正常显示,也就是显示的是赋值后的数据,只是父组件显示的是未赋值的数据。

data() {
    return {
    
    current_user:'',    

}
},
created(){
      const _this=this

      // 判断本地是否有token令牌
      if (getStorage("token") !== null) {
        this.axios.defaults.headers.common['Authorization'] = JSON.parse(getStorage('token'));
        // 验证token是否有效
        verify().then(res=>{
          // 若有效,则赋值,若无效,则将无效token删除
          if(res.status==200){
              _this.current_user=res.data.user
              _this.isAdmin=res.data.user.roles
          }else{
            // 删除本地token
            removeStore("token")
          }
        })      
      }
       console.log(_this.current_user)  //打印出来的仍是未赋值?但是页面创建后,该组件数据还是正常显示
       _this.$emit('getUser',_this.current_user)  //传给父组件的也是未赋值的数据?页面创建后,父组件拿到的数据是未赋值的数据
    }

 

然后我又修改了一下

data() {
    return {
    
    current_user:'',    

    }
},
mounted() {
      this.$emit('getUser',this.current_user)//传给父组件的还是未赋值的数据?
    },
created(){
      const _this=this

      // 判断本地是否有token令牌
      if (getStorage("token") !== null) {
        this.axios.defaults.headers.common['Authorization'] = JSON.parse(getStorage('token'));
        // 验证token是否有效
        verify().then(res=>{
          // 若有效,则赋值,若无效,则将无效token删除
          if(res.status==200){
              _this.current_user=res.data.user
              _this.isAdmin=res.data.user.roles
          }else{
            // 删除本地token
            removeStore("token")
          }
        })      
      }
        
    }

可是结果还是一样。

后来我又改了一下

created(){
      const _this=this
      // 判断本地是否有token令牌
      if (getStorage("token") !== null) {
        this.axios.defaults.headers.common['Authorization'] = JSON.parse(getStorage('token'));
        // 验证token是否有效
        verify().then(res=>{
          // 若有效,则赋值,若无效,则将无效token删除
          if(res.status==200){
              _this.current_user=res.data.user
              _this.isAdmin=res.data.user.roles

              _this.$emit('getUser',_this.current_user)//我在回调函数内传值给父组件发现数据能够正常传给父组件
          }else{
            // 删除本地token
            removeStore("token")
            
          }
        })      
      }

        _this.$emit('getUser',_this.current_user)//但是我在回调函数外面又传了一次,但是父组件获取到的是我已经赋过值的数据。这就把我搞懵了。
}

这次结果是父组件能收到子组件赋过值的数据,页面内父子组件的数据都正常显示,但是我明明在子组件创建时调用过两次_this.$emit('getUser',_this.current_user)  这个,但是父组件却能够正常获取到值,我就很迷惑。

有没有哪位大佬能够替我这萌新解答一下!

跪求!跪求!

感激不尽!

查看全部
qq_45640476
“提線木偶”
2020/11/27 01:41
  • spring
  • java
  • vue.js
  • ajax
  • javascript
  • 点赞
  • 收藏
  • 回答
    私信

2个回复