如何从模态组件发出事件并向父级发送数组

Question

在我的vue应用程序中，我有一个模式，其中内容是另一个组件(子组件(，并向其父组件发送一个数组，父组件显示它。我用props完成了这项工作，但了解到它被称为anti.patern，不推荐使用。所以我现在想在活动中尝试一下。但我有点失败了。我执行了一个函数来发出一个事件，该事件调用用数据填充数组的方法。我将事件与父级中的@绑定，但没有反应，或者更准确地说，事件中的值是未定义的。

有人能看一下并告诉我出了什么问题吗。我是vue和事件的新手，所以我有点迷路了：

子事件方法：

generateGroup(){
var pageURL = window.location.href;
var lastURLSegment = pageURL.substr(pageURL.lastIndexOf('/') + 1);
const newMeeting = {meetingUrl: "", meetingName: "", date: this.selectedDate, startTime: "", endTime: ""};
newMeeting.meetingUrl = "https://jitsi.zim.uni-due.de/" + this.randomUrlIdGenerator().toString()
newMeeting.meetingName = lastURLSegment
this.model.forEach((model, i) => {
const key = `participant${i + 1}`;
newMeeting[key] = model.voterUniqueName;
newMeeting.startTime = model.startTime;
newMeeting.endTime = model.endTime
})
this.newGroup = [],
this.finalMeetingArray.push(newMeeting)
this.newGroup.push(newMeeting)
return this.newGroup

},
eventSetter(){
this.$emit('updateArray', this.generateGroup())
this.newGroup = []
this.selectedDate = ""
this.model = []
}
eventSetter(){
this.$emit('updateArray', this.generateGroup())
this.newGroup = []
this.selectedDate = ""
this.model = []
}

Parenthtml:这是我试图绑定事件并调用函数的地方：

<AddGroupsModal @updateArray="generateGroup" ref="addGroupModal"/>

方法：

generateGroup(value){
if(this.meetingArrayBackend.length === 0){
console.log(this.meetingArrayBackend)
let lastElement = this.value
this.meetingsArray.concat(this.value)
console.log("THIS.MEETING WIRD GEPUSHT INHALT : " + this.value)
} else
{
let lastElement = this.value[this.value.length - 1]
console.log(value)
this.meetingsArray.push(lastElement)
}
console.log(JSON.stringify(this.meetingsArray))
},

Answer 1

return setTimeout(() => { this.newGroup.push(newMeeting) })

这是您从emit中调用的函数返回的内容，如果您想将此函数发送的数据发送给父组件捕获的事件，您必须返回一个值，此时您要么在此之前执行setTimeout，然后返回该值，但我认为您不需要它。只需返回您想在父组件中接收的值，现在我从上下文中不知道你在那里给出了你想要的东西，但我猜你想要newGroup，这样你就可以做一个：

this.newGroup.push(newMeeting) 
return this.newGroup

这将为您获取@updateArray事件中的数据。

下一个问题，@updateArray="generateGroup2()"不正确——这实际上意味着/大致翻译为：

((paramsFromEmit) => generateGroup2())();

它应该是：@updateArray="generateGroup2"，这意味着：

generateGroup2(paramsFromEmit);

这就是您想要调用的，当emit触发此事件时，这将获得您在generateGroup2函数中发出的值。当你把它写在模板中时，很难理解这两者之间的细微区别，但我希望这能帮助你更多地理解它。

现在，我真的不明白你在generateGroup2中试图做什么，但我会让你弄清楚，我的答案会让你从孩子到父母，再到generateGroup2，如果你需要更多帮助，请随时询问。此外，请出于对一切神圣之爱，不要使用setTimeouts请：D