Как заставить компонент vue обновить список в другом компоненте, который не является его дочерним? - PullRequest
Новая
       7

Как заставить компонент vue обновить список в другом компоненте, который не является его дочерним?

0 голосов
/ 28 июня 2018

У меня есть два компонента, скажем: 

<filter-controls></filter-controls>

<data-list></data-list>

<data-list> содержит список элементов, которые можно отфильтровать. Допустим, они являются ингредиентами.

<filter-controls> имеет поле ввода. Когда кто-то вводит данные в поле ввода, я хочу, чтобы список данных автоматически фильтровался.

Я не уверен, как заставить список данных реагировать на изменения в filter-control. Может кто-нибудь, пожалуйста, укажите мне в правильном направлении? Спасибо.

Ответы [ 2 ]

0 голосов
/ 29 июня 2018
Ответ

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

  • Во-первых, поскольку <filter-controls> и <data-list> связаны друг с другом, создайте главный компонент, который включает в себя один из них, возможно, <filtered-data-list>.

  • Во-вторых, создайте свой пользовательский компонент <filter-controls>, чтобы он использовал свойство value и события @input. Это сделает его совместимым с директивой Vue v-model .

  • В родительском компоненте <filtered-data-list> передать соответствующий объект в <filter-controls>, используя v-model. Таким образом, объект будет автоматически обновляться, когда пользователь изменяет элементы управления.

  • Кроме того, в родительском объекте создайте вычисляемое свойство, скажем filteredData, которое принимает полный набор данных и применяет соответствующие фильтры для создания нового набора данных.

  • Наконец, передайте это вычисленное свойство компоненту <data-list>.

0 голосов
/ 28 июня 2018

Вы должны попытаться следовать парадигме одностороннего потока данных. В этом случае <filter-controls> должно $emit вызывать события при вводе или вы можете использовать v-model в своем компоненте. Это похоже на <custom-input> в примере в документации: Использование v-model для компонентов .

Как только ваш родительский компонент понимает, что фильтрация должна быть скорректирована в связи с полученным событием, он может либо изменить реквизит, который передается в <data-list>, который используется, чтобы знать, по чему фильтровать, или если вы передаете список элементов непосредственно в <data-list>, вы можете отфильтровать в родительском элементе, и <data-list> сделает повторный рендеринг для изменения списка.

Главное в Vue, как и в других «реактивных» библиотеках, заключается в том, что вам нужно придерживаться принципа:

данные вниз, подпорки .

Дети не должны мутировать данные своих родителей. Они должны рассказать родителям о чем-то, а родитель должен что-то с этим сделать. В противном случае может возникнуть трудность рассуждать о том, кто за какие данные несет ответственность.

Если вы чувствуете, что проходящие события становятся либо неуправляемыми, либо их слишком много сквозных компонентов, вы можете рассмотреть возможность использования шаблона, подобного магазину. Vue имеет библиотеку Vuex, чтобы помочь с этим, а также обсуждает некоторые вещи, которые следует учитывать в документации: Управление состоянием .

...