Pass data through props in vue.js?

Question

Vue.js

Hello everyone, there is a header as a separate component, it is connected in my main App.vue file as it should be on all pages. The header itself looks different for each page, on the main one there is a light-colored logo, two buttons with a white background (since the main background on the main page is dark) and 2 more buttons, one for registration, the second for entry, also the header of a registered user where his avatar is shown. for another page, etc. you get the gist. I just don’t understand how I can pass this through props so that, for example, if DarkSkin = true, the necessary class has been added that will pull up the styles we need, or whiteSkin for example ... I read the documentation but something doesn’t reach, maybe someone has a good example, I will very grateful. All good)

Answer 1

you need vuex, not props.
There is no need to deal with garbage with throwing settings through a million components back and forth and then changing a random component then breaks the whole scheme.

Answer 2

You can do this - a basic header layout is created - a component that, as a rule, does not contain logic, but sets the external design and a set of slots through which components will be transferred to it.
Next, you create custom components based on this type layout registration-header, user-headerand so on. and add components to the slots that are responsible for this particular header option.
As for creating your own theme, you can make some kind of base component from which the attributes responsible for the theme will be inherited. Based on this attribute, the corresponding class will be used in a particular component. For example, in a component, write this:

<template>
<div :class="`header-${themeName}`">
</div>
</template>
<style>
.header-dark{
...
}
.header-light{
...
}
</style>

You can look at the sources of the library like vuetify - how theme support is implemented there.