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

Question

In my vue application I have a modal where the content is another component (child) and sends an array to its parent component and the parent displays it. I had done this with props which works, but learned it is called an anti.patern and is not recommended. So I wanted to try it with events now. But I am kinda failing. I did the function to emit an event which calls the Method which fills the array with data. I binded the event with @ in my parent but there is no reaction or to be more precise the value from the event is undefined.

Could someone look at it and tell me what is wrong. I am new to vue and events so I am a bit lost:

Child Event Method:

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

Parent html: this is where I am trying to bind my event and call a function:

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

Method:

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

This is what you return from a function you call in the emit , if you want to get the data sent by this function to the event that is captured by the parent component you have to return a value, at this point you either do a setTimeout before this, and then return the value, but i don't think you need it. just return the value you want to receive in the parent component, now i have no clue from the context that you gave what you want there, but I am guessing you want to have the newGroup so you can do a:

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

This should get you the data in the @updateArray event.

Next problem, @updateArray="generateGroup2()" is not correct this actually means/ roughly translates to:

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

It should be: @updateArray="generateGroup2" , which will mean:

 generateGroup2(paramsFromEmit);

This is what you want called, this will get you the value you emitted in the generateGroup2 function, when the emit triggers this event. It is pretty hard to understand the subtle difference between these two when you have it written down in the template but I hope this helped you understand it more.

Now, I do not really understand what you are trying to do in generateGroup2 , but I will let you figure that out, my answer will get you the data from child to parent, and into generateGroup2 , if you need any more help, feel free to ask. Also, please for the love of all that's holy, don't use setTimeout s please :D