Vue中created钩子箭头函数替换：组件传值后无法赋值问题

首先得澄清一个小误区：箭头函数本身可以用于Vue的created生命周期钩子，但如果你是把箭头函数作为事件回调（比如$on的第二个参数），其实你的原代码逻辑是没问题的——箭头函数会捕获外层created钩子的this（也就是当前组件实例），理论上this.userloged = user应该能正常赋值。不过既然你想替换成普通函数，这里提供两种可靠的方案：

方案1：普通函数 + bind()绑定this #

把回调改成普通函数，通过bind(this)强制让函数内的this指向组件实例：

data() {
  return {
    userloged: '',
  }
},
created() {
  serverBus.$on('validation', function(user) {
    this.userloged = user
    console.log("Changed userloged", this.userloged)
    console.log("Here is the user", user)
  }.bind(this))
}

方案2：提前保存组件实例的this #

在created钩子内先把组件实例的this存为一个变量（比如that），然后在普通回调函数里使用这个变量：

data() {
  return {
    userloged: '',
  }
},
created() {
  const that = this
  serverBus.$on('validation', function(user) {
    that.userloged = user
    console.log("Changed userloged", that.userloged)
    console.log("Here is the user", user)
  })
}

额外排查建议 #

如果你的原箭头函数代码还是无法赋值，可能不是箭头函数的问题，可以检查这几点：

• 确认serverBus是正确创建的事件总线实例（比如const serverBus = new Vue()）
• 确认validation事件在其他组件中是通过serverBus.$emit('validation', user)正确触发的，且传递的user值有效
• 可以在组件模板中添加{{ userloged }}实时渲染，验证值是否真的没有更新（有时候console.log的输出可能有延迟或上下文问题）

内容的提问来源于stack exchange，提问作者Camila NieblesR