在 vuejs 上向父级发送样式值

Question

我对 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>

Answer 1

您可以将事件从子路由器视图发送到外部组件，这是技巧

<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