Передать значение стиля родителю на vuejs - PullRequest
Новая
       17

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

1 голос
/ 18 октября 2019

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

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

<template>
  <div id="topBar">
    <div class="container align-center justify-between">
      <router-link to="/">
        <img src="@/assets/logo-white.svg" alt="logo" />
      </router-link>
      <a href="#" @click="showMenu = !showMenu" class="menu-button">
        <img src="@/assets/menu-icon.svg" />
      </a>
    </div>

    <nav id="menu" class="flex align-center" v-bind:class="{ 'js-active': showMenu }">
      <ul id="topNav" class="list-unstyled">
        <li>
          <router-link to="/login">Login</router-link>
        </li>

        <li>
          <router-link to="/opret">Register</router-link>
        </li>

        <li>
          <a href="#" class="close-button" @click="showMenu = false">
            <svg width="20" height="20" viewBox="0 0 33 33" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2.76316 30.2368L30.4059 2.59409" stroke="white" stroke-width="3" stroke-linecap="square" />
              <path d="M30.2368 30.2368L2.59409 2.59409" stroke="white" stroke-width="3" stroke-linecap="square" />
            </svg>
          </a>
        </li>
      </ul>

      <div class="container">
        <ul class="list-unstyled">
          <li>
            <router-link to="/register">Register</router-link>
          </li>
          <li>
            <router-link to="/news">News</router-link>
          </li>
          <li>
            <router-link to="/about>About</router-link>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</template>

<script>
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() {}
};
</script>

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

<template>
  <div id="app">
    <TopBar></TopBar>
    <router-view></router-view>
    <Footer></Footer>
  </div>
</template>

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

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

<div id="topBar">
   <router-link to="/">
        <img src="@/assets/logo-dark.svg" alt="logo" v-if="menuStyle === 'dark' />
        <img src="@/assets/logo-white.svg" alt="logo" v-else />
     </router-link>
</div>

Мой основной дочерний вид таков: 

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: "Profile",
};
</script>

1 Ответ

1 голос
/ 18 октября 2019

Вы можете отправить событие из дочернего представления маршрутизатора во внешний компонент, вот трюк 

<template>
  <div id="app">
    <TopBar :menuStyle="menuStyleProp"></TopBar>
    <router-view @eventFromChild="updateMenuStyle"></router-view>
    <Footer></Fdooter>
  </div>
</template>

<script>
export.default {
name: 'main-component',
data() {
 return {
   menuStyleProp: "",
 };
},
methods: {
  updateMenuStyle(val) {
    this.menuStyleProp = val;
  }
}
}
</script>

F

. Из дочернего элемента вы можете просто отправить событие, чтобы представление маршрутизатора прослушало это событие и обновилореквизиты, верхняя строка обновляется с новым svg

В компоненте верхней панели 

<div id="topBar">
   <router-link to="/">
        <img src="@/assets/logo-dark.svg" alt="logo" v-if="menuStyle === 'dark' />
        <img src="@/assets/logo-white.svg" alt="logo" v-else />
     </router-link>
</div>

<script>
export default {
name: 'topbar-component',
props: {
  menuStyle: {
    type: String,
    default: "dark",
  }
 }
}
</script>

В дочернем компоненте запускается событие для представления маршрутизатора через 

this.$router.app.$emit("eventFromChild", "dark") // change the value to dark or any
...