Обновление компонента prop, когда он автономен в vuejs 2

Question

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

Я пытаюсь найти лучший способ сделать это в Vuejs2. Похоже, что подход заключается в использовании комбинации реквизита и пользовательских событий .

Я создал пример, используя check-list для иллюстрации проблемы: https://codepen.io/duprasa/pen/LmLRjE

Я также создал эту диаграмму, чтобы проиллюстрировать проблему

Я прочитал vue документацию на реквизитах, и они не упоминают, что делать в этом случае, и предостерегают от стратегии, которую я сейчас использую.

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

Спасибо!

Answer 1

Ваш компонент checkList имеет слишком много обязанностей. Если вы хотите, чтобы ваш компонент можно было повторно использовать, он должен иметь только одну ответственность: отображать список элементов и генерировать событие при выборе элемента. Он не должен обновлять элемент самостоятельно.

Компонент, использующий check-list (app), может обработать событие и обновить свойство элемента selected. Он также предоставляет check-list элементы для отображения.

Вы можете ввести новый компонент, скажем, standalone-check-list, который предоставит набор элементов по умолчанию для контрольного списка и обработает событие, чтобы соответствующим образом обновить список. Затем используйте standalone-check-list в качестве автономного компонента.