如何使用vue从$ emit有效负载中获取值

Question

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

对话列表

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

ConversationModal

Vue devtools输出

[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])
},

错误

  

“打开对话”事件处理程序中的错误：“ TypeError：无法读取未定义的属性'2'”

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

Answer 1

在从子组件发射到父组件的事件中，您将收到像发射它们一样的参数：

因此，请从您的$event处理程序中删除getConversation：

<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
   }