Дизайн: два Vue компонента, которые разделяют Sass - PullRequest
0 голосов
/ 03 февраля 2019

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


Возможное решение 1:

Создайте один base компонент, имеющий необходимый sassкоторый используется обоими компонентами.Включите slots, чтобы передать разметку от двух других компонентов.В двух других компонентах добавьте компонент base и передайте разметку в slots.Это уменьшает количество повторений sass, сохраняя все общие sass, необходимые в компоненте base.

Возможное решение 2:

Создание дополнительногоsass файл со всеми распространенными css, а затем просто импортируйте его в файлы компонентов, для которых требуется стилизация.Я не уверен, приемлемо ли это в мире Vue.Я никогда не видел проект, где у автора был отдельный файл для sass.Он всегда включен в один компонент файла.В каталоге styles люди обычно включают только глобальные переменные и миксины.Они не включают стили, которые используются только в двух компонентах.

Возможное решение 3:

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


Это единственные решения, которые я могу придумать, поэтомудалеко не повторяя sass в двух разных файлах.Я знаю о миксинах в sass, но я не уверен, куда мне поместить миксинВ каком каталоге это будет, и как мне это организовать?Кроме того, мне также известны миксины в Vue, но я не думаю, что миксины Vue позволяют помещать в них sass.У меня сейчас большая дилемма.Любая помощь приветствуется.Заранее спасибо.

...