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

Question

在我的 vue 应用程序中，我有一个模态，其中内容是另一个组件（子组件）并将数组发送到其父组件，父组件显示它。 我已经用 props 完成了这个工作，但了解到它被称为 anti.pattern 并且不推荐。 所以我现在想用事件来尝试它。 但我有点失败。 我做了这个函数来发出一个事件，该事件调用用数据填充数组的方法。 我在我的父母中用 @ 绑定了事件，但没有反应，或者更准确地说，事件的值是未定义的。

有人可以看看它并告诉我出了什么问题。 我是 vue 和 events 的新手，所以我有点迷茫：

子事件方法：

      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 = []
  }

父 html：这是我尝试绑定事件并调用函数的地方：

  <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);

这就是您想要调用的，当发出触发此事件时，这将为您提供在generateGroup2函数中发出的值。 当您将它们写在模板中时，很难理解这两者之间的细微差别，但我希望这能帮助您更好地理解它。

现在，我不太明白您在generateGroup2中尝试做什么，但我会让您弄清楚，我的回答将使您获得从孩子到父母的数据，并进入generateGroup2 ，如果您需要更多帮助，请随时问。 另外，为了所有神圣的事物，请不要使用setTimeout s :D