发出到父触发器方法，但不是值

Question

当用户登录时，我们返回user_name并将其从login.vue组件$emit到App.vue组件并触发updateUser((方法，但即使我可以发出警报或记录user_name，该值也为空

试图用几种不同的方式定义user_name user_name和this.user_name

login.vue -- 登录方法

await this.$apollo.mutate({mutation: LOGIN, variables:{username: 
this.username, password: this.password}})
.then((result) => {
const user_name = result.data.login.user.User_Name
alert(user_name)
this.$emit('displayUser', user_name) 

App.vue

<v-list-item-title class="title" v-if="user_name" v-bind:user_name="user_name" > 
{{user_name}}
<v-list-item-subtitle>

login.vue 包含在 app.vue 组件中的位置

<v-content>
<router-view v-on:displayUser="updateUser(user_name)"></router-view>
</v-content>  

方法 - 使用未定义触发警报

updateUser(userN){
alert(userN)
if (userN === 'hide'){
this.user_name = ''
}
else{
this.user_name = userN;
}
}

我可以在updateUser方法中弹出警报，但值为空或未定义

Answer 1

您可能需要将<router-view>代码替换为以下内容：

<v-content>
<router-view v-on:displayUser="updateUser"></router-view>
</v-content>

请注意，我不再在事件处理程序中传递user_name。这是因为user_name在您的模板中不可用。

您说On 'displayUser', call the 'updateUser' with the 'user_name' variable.但是您的App组件不知道user_name。

但你真正想说的是On 'displayUser', call the 'updateUser' method with whatever event parameters are sent back.

---

您还可以通过传递$event来指定事件参数，如下所示：

<v-content>
<router-view v-on:displayUser="updateUser($event)"></router-view>
</v-content>

文档：https://v2.vuejs.org/v2/guide/events.html#Methods-in-Inline-Handlers