Я спорю о том, как мне проектировать мои компоненты 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
.У меня сейчас большая дилемма.Любая помощь приветствуется.Заранее спасибо.