VueJS доступ к вложенному значению данных компонента

Question

Родительский компонент содержит один компонент адреса :

// ParentComponent.vue
<Address ref="childAddress"></Address>

Компонент адреса содержит много компонентов контакта :

// AddressComponent.vue
<template>
  <div>
    <Contact ref="childContact"></Contact>
    <Contact ref="childContact"></Contact>
    <Contact ref="childContact"></Contact>
  </div>
</template>
export default {
  components: { Contact },
  data: () => ({
    address_inputs: [],
  }),
  methods: {
    getAddresses() {
      // RETURN address_inputs
    }
  }
}

Контейнер компонента Contact:

// ContactComponent.vue
    <template>
      <div>
        contact component
      </div>
    </template>
    export default {
      components: { Contact },
      data: () => ({
        contact_inputs: [],
      }),
      methods: {
        getContacts() {
          // RETURN contact_inputs
        }
      }
    }

Что я пытаюсь сделать:

Я пытаюсьполучить address_inputs[] из AddressComponent и contact_inputs[] из ContactComponent в ParentComponent .

Что я пробовал:

Я пытался позвонить getAddresses в AddressComponent , используя: this.$refs.childAddress.getAddresses();

И это работает нормально, но я не смог получить доступ к ContactComponent contact_input[] значение.

Answer 1

$ refs атрибут - это функция, которая позволяет вам манипулировать DOM, например, изменять цвет div, чтобы вы шли не в ту сторону.

Если вы хотите передать данные от родителя к компоненту, вы должны использовать реквизиты.Если вы хотите получать данные от дочернего к родительскому, вы должны использовать события.

В вашем примере вы пытаетесь передать данные от дочернего к родительскому, поэтому в свой дочерний компонент напишите метод ввода ввода, который генерирует событие, например: this.$emit('testEvent', dataFromInput);

Конец, затем в родительском шаблоне вы можете его перехватить

<Contact ref="childContact" @testEvent="printData"></Contact>

, а в родительской части js

methods: {
  printData(dataFromInput) {
    console.log(dataFromInput);
  }
}

и все.