Vue (аналог) компонентов и возможность повторного использования

Question

У меня есть 3 компонента VUE, они все делают подобные вещи.

Все они выводят квадратный (100px x 100px) div со значением внутри него, они разных цветов.

• компонент 1 (красный) принимает 2 значения и выводит процент.

• компонент 2 (синий) принимает значение с плавающей запятой и округляет егок следующему int

• компонент 3 (зеленый) принимает 3 значения и находит среднее значение.

Есть ли способ объединить это в одинмногоразовый компонент.У них общий шаблон и похожие методы.

Какой лучший способ высушить это немного.

Answer 1

Зависит от того, какие части перекрываются.Скорее всего, вы должны быть отдельными компонентами, но они могут расширить базовый компонент, если они повторно используют один и тот же шаблон, или они могут использовать миксины для совместного использования функций.

вот ссылка, которая более подробно рассматривается https://alligator.io/vuejs/composing-components/

Расширения позволяют расширять еще один компонент, причем параметры вашего компонента имеют более высокий приоритет по сравнению с родительским компонентом.Это означает, например, что если и родительский компонент, и ваш компонент содержат хук созданного (), сначала будет вызван хук созданного () компонента, а затем родительский.

Mixins еще круче.Они позволяют расширять определения нескольких компонентов.Используя миксины, легко предоставлять повторно используемые методы и данные для любого количества ваших компонентов.

Я должен отметить, что использование миксинов является спорным.У сообщества реагирования довольно сильная позиция https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750 однако создание HOCs vue немного сложнее