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

Question

我正在从我的 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])
},

错误

Error in event handler for "open-conversation": "TypeError: Cannot read property '2' of undefined"

我不明白。事件正在触发，并且在 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
   }