Можно ли достать данные компонента снаружи в нужный момент?

Question

[Evgenii Borovoi]

У меня десяток компонентов в виде вкладок. Каждая вкладка содержит от 5 до 10 селектов, инпутов и т.д. по сути переменных.
Кнопка "подтвердить" находится снаружи и именно при нажатии ее должны обрабатываться данные текущего компонента.
Заводить в хранилище больше 50 новых переменных со всеми геттерами\сеттерами рука не поднимается. В доках вычитал что можно использовать v-model на компонентах, но все равно это еще 10 переменных. А данные из компонентов нужны 1 раз,а после переключения вкладки там еще и очищать надо.
Я придумал два способа, но может можно проще?
1. Сделать в хранилище currentActiveModule и в него писать массив с данными активного модуля при каждом изменений данных в нем. И значит при нажатии кнопки просто берем от туда и работаем.
2. Сделать не одну кнопку "подтвердить", а в каждом модуле свою, идентичную. Но тут начинаются серьезные проблемы с версткой и с возможностью расширения.

Answer 1

[Kotaro Hiba]

Родитель
<v-component ref="component" />
Потом когда совершаем какое то действие в родителе можно обратиться к ребенку

sendForm() {
const chlidData = this.$refs.component.$data 
}

Берем нужные данные, сам не пользовал, но кажется во vuetify видел что то подобное

Comments

[Evgenii Borovoi]

Я проверил. Работает. Вот из документации
Там правда написано, что оно не реактивно, но значения переменных внутри компонента меняются.
Изящное решение, спасибо.

Answer 2

[ReaverJS]

Можно при изменении данных во внутренних компонентах - передавать все данные в одном объекте родителю. А уже при нажатии кнопки - обраватывать этот объект.
Пример:

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

<template>
<div>
  <component :is="currentTab"  @updated="updateHandler" />
  <button @click="send">Send</button>
<div>
</template>

<script>
...
data: () => {
  return {
    currentFormData = {}
  }
}
methods: {
  updateHandler: function(formData) {
    this.currentFormData = formData;
  },
  send: function() {
    console.log(this.currentFormData);
  }
}
</script>

Код компонента вкладки:

<div>
  <form @change.prevent="onChange">
    <input/>
    <input/>
    <input/>
  </form>
</div>
<script>
...
methods: {
  onChange: function() {
    let myFormData = {
      kekw: this.kekw,
      pepeHand: this.pepeHands...
    };
    this.$emit('updated', myFormData);
  }
},
mounted() {
  this.onChange();
}
</script>

Comments

[ReaverJS]

Чет я фигню написал. Слишком замудренно.

Можно Из родителя передавать в дочерние компоненты prop, при нажатии кнопки.
А уже дочерний компонент при изменении prop-а - вызовет emit с данными.

Т.е.
1) Prop "toEmit" = false
2) Нажали кнопку. prop "toEmit" = true
3) Дочерний компонент при изменении toEmit = true - эмитит событие "sendData" со всеми данными.
4) Родительский компонент ловит событие и вызывает свой метод. Сбрасывает toEmit = false.

[Александр Маджугин]

ReaverJS, можно, но мне кажется архитектурно более верно использовать модель и эмиттить данные в родителя при изменении их в дочернем компоненте - пусть родитель всегда имеет актуальный объект данных, а дочернему компоненту вообще не стоит знать о существовании кнопки.
Ваше решение имеет право на существование, но в нем компоненты сильнее связаны и я считаю что это плохо.

[Evgenii Borovoi]

ReaverJS, хорошие решения, спасибо. Я через хранилище так хотел, но так даже лучше.

Answer 3

[Александр Маджугин]

А почему у вас на каждуй вкладку отдельный компонент? Они так сильно разнятся и их невозможно обобщить до однодного?
Но даже в этом случае у вас должен быть один компонент на все вкладки, который будет подключать разный контент как дочерний компонент по имени:

<div class="tab">
        <component
                v-bind:is="activeTabComponent"
                v-model="values"
            ></component>
    </div>

и передавать в этот дочерний компонент в модель, объект куда будет эмиттить свои данные дочерний компонент.
И вот в этом компоненте вкладки расположите свою кнопку.

Answer 4

[Evgenii Borovoi]

А почему у вас на каждуй вкладку отдельный компонент? Они так сильно разнятся и их невозможно обобщить до однодного?

Да. Принципиально разные, по типу "головной убор", "гаджет" "удочка". Где-то набор чекбоксов, где-то селекты и textarea и так далее.

И вот в этом компоненте вкладки расположите свою кнопку.

Она итак там, потому что на самом деле, там два уровня выше еще есть компонентов.
component1
... component2
..... мы тут, кнопка
.........component3.1> component3.2>
..
Я не понял до конца как, к сожалению.
Мы делаем values в component2 и передаем через props в component3.x и там при каждом изменении меняем его, так?