EugeneOne77
@EugeneOne77
Laravel, Vue, Wordpress разработчик.

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

У меня десяток компонентов в виде вкладок. Каждая вкладка содержит от 5 до 10 селектов, инпутов и т.д. по сути переменных.
Кнопка "подтвердить" находится снаружи и именно при нажатии ее должны обрабатываться данные текущего компонента.
Заводить в хранилище больше 50 новых переменных со всеми геттерами\сеттерами рука не поднимается. В доках вычитал что можно использовать v-model на компонентах, но все равно это еще 10 переменных. А данные из компонентов нужны 1 раз,а после переключения вкладки там еще и очищать надо.
Я придумал два способа, но может можно проще?
1. Сделать в хранилище currentActiveModule и в него писать массив с данными активного модуля при каждом изменений данных в нем. И значит при нажатии кнопки просто берем от туда и работаем.
2. Сделать не одну кнопку "подтвердить", а в каждом модуле свою, идентичную. Но тут начинаются серьезные проблемы с версткой и с возможностью расширения.
  • Вопрос задан
  • 99 просмотров
Решения вопроса 2
lina666
@lina666
Изучаю веб ЯП.
Родитель
<v-component ref="component" />
Потом когда совершаем какое то действие в родителе можно обратиться к ребенку
sendForm() {
const chlidData = this.$refs.component.$data 
}

Берем нужные данные, сам не пользовал, но кажется во vuetify видел что то подобное
Ответ написан
ReaverJS
@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>
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
А почему у вас на каждуй вкладку отдельный компонент? Они так сильно разнятся и их невозможно обобщить до однодного?
Но даже в этом случае у вас должен быть один компонент на все вкладки, который будет подключать разный контент как дочерний компонент по имени:
<div class="tab">
        <component
                v-bind:is="activeTabComponent"
                v-model="values"
            ></component>
    </div>

и передавать в этот дочерний компонент в модель, объект куда будет эмиттить свои данные дочерний компонент.
И вот в этом компоненте вкладки расположите свою кнопку.
Ответ написан
EugeneOne77
@EugeneOne77 Автор вопроса
Laravel, Vue, Wordpress разработчик.
А почему у вас на каждуй вкладку отдельный компонент? Они так сильно разнятся и их невозможно обобщить до однодного?

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы