Vue.js how to pass array from child component to parent component?

Question

I'm building a contact book app and i made modal in child component with from with few input fields. I'm trying use that values and add them to parent component. I have passed data with $emit but cant figure out how to use it in parent component - to add it in that table row.

Here is child component code:

            <form @submit.prevent="addContact">
              <div class="form-group">
                <label for="exampleInputName1">First Name</label>
                <input type="text" v-model="contacts.fname" class="form-control" id="exampleInputName1"
                  placeholder="Enter First Name" required>
              </div>
              <div class="form-group">
                <label for="exampleInputLastName1">Last Name</label>
                <input type="text" v-model="contacts.lname" class="form-control" id="exampleInputLastName1" 
                placeholder="Enter Last Name"
                  required>
              </div>
              <div class="form-group">
                <label for="exampleInputEmail1">Email Address</label>
                <input type="email" v-model="contacts.email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                  placeholder="Enter email" required>
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone
                  else.</small>
              </div>
              <div class="form-group">
                <label for="exampleInputAdress1">Adress</label>
                <input type="text" v-model="contacts.adress" class="form-control" id="exampleInputAdress1" placeholder="Enter Adress" required>
              </div>
              <div class="form-group">
                <label for="exampleInputPhone1">Phone Number</label>
                <input type="number" v-model="contacts.phone" class="form-control" id="exampleInputPhone1" placeholder="Enter Phone Number"
                  required>
              </div>
              <div class="form-group">
                <label for="exampleInputCompany1">Company</label>
                <input type="text" v-model="contacts.company" class="form-control" id="exampleInputCompany1" placeholder="Enter Company" required>
              </div>
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            <button type="submit" class="btn btn-success" @submit="addContact">Save</button>
          </div>

<script>
  export default {
    data() {
      return {
        contacts: [{
          fname: '',
          lname: '',
          email: '',
          adress: '',
          phone: '',
          company: ''
        }]
      }
    },
    methods: {
      addContact() {
        this.$emit('passArr', this.contacts);
      }
    },
  }
</script>

Here is parent component:

   <tbody>
          <tr class="d-flex">
            <td class="user col-3"></td>
            <td class="col-3"></td>
            <td class="col-2">}</td>
            <td class="col-2"></td>
            <td class="col-2"></td>
          </tr>
   </tbody>

<script>
  import modal from './AddContactModal.vue'

  export default {
    data() {
      return {
        
      }
    },
    components: {
      modal
    },
    methods: {

    }
  }
</script>

Answer 1

You can listen for the passArr event in your parent component like this:

<parent-comp @passarr="myMethod" />

...
 
methods: {
    myMethod(arg)
      {
         console.log(arg)
         //arg will contain what you passed in the child method when you 
         // emit the event with `this.contacts` as arguments
      }

}