在 vuejs 上将样式值发送到 parent

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 我的 TopBar parent 组件的 menuStyle，这样我就可以根据 child

发出的 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>

我的主要child观点是这样的：

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

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

Answer 1

您可以从 child 路由器视图向外部组件发出事件，这是技巧

<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

从 child 你可以只发出事件，这样路由器视图就会监听那个事件并更新道具，顶部栏会更新为新的 svg

In topbar component

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

In the child component trigger an event to router view via

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

在 vuejs 上将样式值发送到 parent

Emit style value to parent on vuejs

html

javascript

eventemitter

vue.js