javascript — передать значение стиля родителю на vuejs.

Передать значение стиля родителю на vuejs

Я довольно новичок в VueJS и пытаюсь все выяснить.

У меня есть конкретная проблема на моем сайте, где у меня есть компонент TopBar, который содержит логотип и меню.

 {amp}lt;template{amp}gt; {amp}lt;div id="topBar"{amp}gt; {amp}lt;div class="container align-center justify-between"{amp}gt; {amp}lt;router-link to="/"{amp}gt; {amp}lt;img src="@/assets/logo-white.svg" alt="logo" /{amp}gt; {amp}lt;/router-link{amp}gt; {amp}lt;a href="#" @click="showMenu = !showMenu" class="menu-button"{amp}gt; {amp}lt;img src="@/assets/menu-icon.svg" /{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;nav id="menu" class="flex align-center" v-bind:class="{ 'js-active': showMenu }"{amp}gt; {amp}lt;ul id="topNav" class="list-unstyled"{amp}gt; {amp}lt;li{amp}gt; {amp}lt;router-link to="/login"{amp}gt;Login{amp}lt;/router-link{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li{amp}gt; {amp}lt;router-link to="/opret"{amp}gt;Register{amp}lt;/router-link{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li{amp}gt; {amp}lt;a href="#" class="close-button" @click="showMenu = false"{amp}gt; {amp}lt;svg width="20" height="20" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg"{amp}gt; {amp}lt;path d="M2.76316 30.2368L30.4059 2.59409" stroke="white" stroke-width="3" stroke-linecap="square" /{amp}gt; {amp}lt;path d="M30.2368 30.2368L2.59409 2.59409" stroke="white" stroke-width="3" stroke-linecap="square" /{amp}gt; {amp}lt;/svg{amp}gt; {amp}lt;/a{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;div class="container"{amp}gt; {amp}lt;ul class="list-unstyled"{amp}gt; {amp}lt;li{amp}gt; {amp}lt;router-link to="/register"{amp}gt;Register{amp}lt;/router-link{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li{amp}gt; {amp}lt;router-link to="/news"{amp}gt;News{amp}lt;/router-link{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;li{amp}gt; {amp}lt;router-link to="/about{amp}gt;About{amp}lt;/router-link{amp}gt; {amp}lt;/li{amp}gt; {amp}lt;/ul{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/nav{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;script{amp}gt; import CloseMixin from "../mixins/close"; export default { mixins: [CloseMixin], data: function() { return { showMenu: false }; }, watch: { $route() { this.showMenu = false; } }, methods: { close() { let nav = document.querySelector("#menu"); if (nav.classList.contains("js-active")) { nav.classList.remove("js-active"); } } }, mounted() {} }; {amp}lt;/script{amp}gt; 

И я вставляю этот компонент в моем представлении App.vue

 {amp}lt;template{amp}gt; {amp}lt;div id="app"{amp}gt; {amp}lt;TopBar{amp}gt;{amp}lt;/TopBar{amp}gt; {amp}lt;router-view{amp}gt;{amp}lt;/router-view{amp}gt; {amp}lt;Footer{amp}gt;{amp}lt;/Footer{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/template{amp}gt; 

Моя проблема в том, что на некоторых моих видах логотип и цвета должны быть темными, потому что вид имеет светлый фон. Поэтому я как-то хочу $emit emit menuStyle для моего родительского компонента TopBar, чтобы я мог установить логотип и цвет на основе menuStyle, испускаемого дочерним элементом

Так что я мог бы получить что-то вроде

 {amp}lt;div id="topBar"{amp}gt; {amp}lt;router-link to="/"{amp}gt; {amp}lt;img src="@/assets/logo-dark.svg" alt="logo" v-if="menuStyle === 'dark' /{amp}gt; {amp}lt;img src="@/assets/logo-white.svg" alt="logo" v-else /{amp}gt; {amp}lt;/router-link{amp}gt; {amp}lt;/div{amp}gt; 

Мой главный детский взгляд таков:

 {amp}lt;template{amp}gt; {amp}lt;router-view{amp}gt;{amp}lt;/router-view{amp}gt; {amp}lt;/template{amp}gt; {amp}lt;script{amp}gt; export default { name: "Profile", }; {amp}lt;/script{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector