@BallooO0

Предать данные через props во vue.js?

Всем привет, есть хедер как отдельный компонент, он подключается у меня в главном файле App.vue так как должен быть на всех страницах. Сам хедер выглядит по разному для каждой страницы, на главной лого светлого цвета, две кнопки с белы беграундом ( так как основной беграунд на главной темный) и ещё 2 кнопки, одна на регистрацию вторая на вход, также хедер зарегистрированного пользователя где изображена его аватар это для другой страницы и т.д. суть вы поняли. Вот только не пойму как мне передать это через props что бы допустим если DarkSkin = true, добавился нужный класс который подтянет нужные нам стили, или whiteSkin к примеру... Документацию читаю но что то не доходит, может у кого есть наглядный пример, буду очень благодарен. Всем добра)
  • Вопрос задан
  • 186 просмотров
Пригласить эксперта
Ответы на вопрос 2
Sanasol
@Sanasol
нельзя просто так взять и загуглить ошибку
vuex вам нужен, а не пропсы.

Не надо заниматься фигней с прокидываением настроек через миллион компонентов туда обратно и чтоб изменение случайного компонента потом сломало всю схему.
Ответ написан
Комментировать
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Можно делать так - создается базовый лэйаут хидера - компонент, который как правило не содержит логики, но задает внешнее оформление и набор слотов, через которые в него будут передаваться компоненты.
Далее создаете кастомные компоненты на базе этого лэйаута типа registration-header, user-header и т.д. и добавляете в слоты компоненты, отвечающие за данный конкретный вариант хидера.

По поводу создания собственной темы - можно сделать какой-то базовый компонент, от которого будут наследоваться аттрибуты, отвечающие за тему. На базе этого аттрибута будет в конкретном компоненте будет использоваться соответствующий класс. Например, в компоненте выпишите так:
<template>
<div :class="`header-${themeName}`">
</div>
</template>
<style>
.header-dark{
...
}
.header-light{
...
}
</style>

Можете посмотреть исходники библиотеки типа vuetify - как там реализуется поддержка темы.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы