Добрый день. Возник вопрос связанный с props и динамическими компонентами Vue.js (без vue-router). Использую vue-cli для старта и vue-resource для запросов на сервер.
Общая схема такова: есть родитель который запрашивает данные с сервера и передаёт их через props
дочерним компонентам. Так же он переключает компоненты.
Изначально я делал последовательное переключение компонентов. Первый компонент у меня слушал значение props
с помощью watch
и когда данные там появлялись, они копировались в data
компонента. Далее при определённых условиях родитель переключал на следующий компонент. В нём уже не было нужды слушать с помощью watch
значения в props
, так как они уже там точно есть и я в хуке Created
вызывал метод который их копировал в data
компонента. И так в следующем и в следующем. Но вот когда я решил отказаться от последовательности, возникли некоторые сложности. Первое что я сделал, это добавил во всех дочерних компонентах watch
слушающие props
, который в свою очередь вызывал метод копирования в data
компонента. Такой подход позволил первым запустить любой компонент, но при переключении на другой, вызова функции копирования не происходило, так как определение вызова метода находилось в watch
слушающем изменения props
. Однако props на этот момент уже имеет свои данные и они не меняются, следовательно callback
у watch
не вызывается. Я попробовал добавить вызов метода копирования в хуке Created
, но получил ошибку. И это логично, так как при загрузке первого компонента данных для копирования ещё нет.
Немного поэкспериментировав я нашел вариант решения этой задачи.
Это создание события в потомке с помощью $emit()
которое запускает в родителе метод получения данных с сервера. Далее родитель передаёт их через props потомку, а тот в свою очередь слушает с помощью watch
изменения props
. Это работает и позволяет первым запустить любого потомка, но при их переключении опять происходит событие которое вызывает метод родителя на получение данных с сервера. Чтоб не создавать ненужную нагрузку на сервер и не запрашивать опять данные которые уже есть я ограничил кол-во исполнения тела функции до одного раза. Теперь сколько бы события не вызывали метод, он исполнится единожды при первом вызове. Но вот при переключении компонентов опять сталкиваюсь с проблемой. Функция копирования в потомке не запускается так как её вызов находится в watch
. Единственное что приходит в голову, это создать вспомогательную переменную в данных передаваемых через props
и ложить в неё уникальное значение при каждом событии генерируемом в потомке. Это заставит срабатывать watch
у потомков.
Однако мне кажется что это не очень правильное решение. Очень смахивает на костыли ). Хотел спросить у знающих, как правильно решить эту задачу?
Спасибо!
правка:
Придумал ещё один вариант. Вызов функции копирования в компонентах помещаем в watch
и в хук created
с условием, если в props
не пусто то вызываем, а если там пусто, значит это первый запуск компонента и мы ждём пока данные придут с сервера. watch
их отловит и вызовет функцию копирования. Это работает, но на сколько это жизнеспособно и правильно? Хотелось бы увидеть варианты как это можно реализовать по другому.