如何使用 Vue.js 从 $emit 有效负载中获取值答案

【问题标题】：How do I get a value from $emit payload with Vue.js如何使用 Vue.js 从 $emit 有效负载中获取值
【发布时间】：2019-03-27 02:44:24
【问题描述】：

我正在发出一个具有不同值的事件，从我的 ConversationList（子组件）到 ConversationModel（父组件）。

对话列表

getConversation(conversation_id, receiver_id, username, avatar){
  this.$emit('open-conversation', receiver_id, conversation_id, username, avatar);
}

对话模式

Vue 开发工具输出

[2,1,"Jeff","http://i.pravatar.cc/52"]

模板

<converstations-list v-if="showConversation == false" v-on:open-conversation="getConversation($event)"></converstations-list>

方法

getConversation(event){
    console.log(event.payload[0] + event.payload[1] + event.payload[2] + event.payload[2])
},

错误

“open-conversation”的事件处理程序出错：“TypeError: Cannot read property '2' of undefined”

我不明白。该事件正在触发并且在devtools 中有一个我无法访问的有效负载对象。我做错了什么？

【问题讨论】：

【解决方案1】：

如果从子组件向父组件发出事件，您将收到与发出它们一样的参数：

所以从你的getConversation处理程序中删除$event：

<converstations-list v-if="showConversation == false" v-on:open-conversation="getConversation"></converstations-list>

并实现getConversation方法如下：

 getConversation(receiver_id, conversation_id, username, avatar){
     // do whatever you want with that parameters
   }

【讨论】：