0

Добрый день. Возник вопрос связанный с 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 их отловит и вызовет функцию копирования. Это работает, но на сколько это жизнеспособно и правильно? Хотелось бы увидеть варианты как это можно реализовать по другому.

0

1 ответ 1

1

props не нужно копировать в data, это точно такой же источник реактивных данных в том же неймспейсе (экземпляре Vue), что и data; data - это контекст, который не выходит за пределы компонента, а props - это отфильтрованный родительский контекст. Их свободно можно использовать в шаблоне, и он будет реагировать на изменения, просто в отличие от data props нельзя установить (точнее, можно, но родитель этого не заметит):

<script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script>
<div id="target">
  <proof v-bind:prop="entry" />
</div>
<script type="application/ecmascript">
Vue.component('proof', {
  template: '<div>{{ prop }}</div>',
  props: ['prop']
})
var app = new Vue({el: '#target', data: {entry: 0}})
var interval = setInterval(function () {
  app.entry = app.entry > 8 ? 0 : app.entry + 1 
}, 1000)
</script>

Если же вам все-таки необходимо по каким-то причинам копировать props, то вы можете либо создавать элементы, но держать их скрытыми, либо использовать связку this.$props / this.$options.propsData в created/beforeCreated плюс описанный watch

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.