Vue. js как передать массив от дочернего компонента к родительскому компоненту? - PullRequest
Новая
       10

Vue. js как передать массив от дочернего компонента к родительскому компоненту?

0 голосов
/ 12 июля 2020

Я создаю приложение контактной книги, и я сделал модальный дочерний компонент с помощью с несколькими полями ввода. Я пытаюсь использовать эти значения и добавить их в родительский компонент. Я передал данные с помощью $ emit, но не могу понять, как использовать их в родительском компоненте - чтобы добавить их в эту строку таблицы.

Вот код дочернего компонента: 

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

Вот родительский компонент: 

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

1 Ответ

0 голосов
/ 12 июля 2020

Вы можете прослушивать событие passArr в родительском компоненте следующим образом: 

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

}
...