最近在练习前后端分离时前端通过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) 这个，但是父组件却能够正常获取到值，我就很迷惑。

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

跪求！跪求！

感激不尽！

link中可以通过代码发射去调用let中定义的变量么？怎么实现？

zjbonrace

1个回复