Question

我在vue中的两个组件之间共享信息。在这一刻，我可以使用箭头函数获取创建的钩子的值但是，我不能将此值用于我声明的其他属性。我读到箭头函数在创建的钩子中不起作用，我想知道如何替换这个箭头函数并获得我需要的值。

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

userloged是我声明的属性。

Answer 1

来自Vue's official docs：

请勿在options属性或回调函数上使用箭头功能，例如created: () => console.log(this.a) [...]。由于箭头功能绑定到父上下文，因此this将不会像您期望的那样成为Vue实例，通常会导致诸如Uncaught TypeError: Cannot read property of undefined之类的错误。

很难看到如何确保在没有访问minimal example that reproduces the issue的情况下删除所有错误，但是用(user) =>替换function(user)应该已经删除了主要错误。

Answer 2

“请勿使用箭头功能”的真正含义是，您必须像这样定义create回调：

created () {...} // good

但不是这样：

created: () => {...} // bad, do not use

因为在第二个示例中，this已绑定到全局实例，但未绑定到您的Vue实例，所以this.userloged将不起作用。

问题的关键在于您正在实例方法中使用箭头函数，对于您的问题，该方法serverBus.$on。因此，这里箭头功能内的this实际上绑定到serverBus。

您需要做的是在进入箭头功能之前将this移至that之类，例如：

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

vue

2 个答案: