VueJS 子组件按钮更改父组件的 class

Question

我有一个带有按钮的导航组件，用于切换深色 mode/light 模式。当我点击这个按钮时，我想在App.vue中改变一个class。如何将数据从按钮传递到 App.vue？我相信我必须从 Top Nav 发出一些东西并 v-bind App.vue 中的 class，但我不太明白如何改变 class.

当我运行这个的时候，按钮不会变class就div。

App.vue

<template>
  <div id="app" :class="[isActive ? 'darkmode' : '']>
    <header>
      <top-nav @change-mode="enableDarkMode"></top-nav>
    </header>
    ...
  </div>
</template>

<script>

export default {
  name: "App",
  components: {
    TopNav,
  },
  props: ['isActive'],
  data() {},
  methods: {
    enableDarkMode(isActive) {
      console.log(isActive)
    },
  },
};
</script>

顶部导航组件

<template>
  ...
  <div>
    <button
      :class="[isActive ? 'dark' : 'light']"
      @click="toggle">
        {{ isActive ? "DarkMode" : "LightMode" }}
    </button>
  </div>
</template>

<script>
export default {
  name: "TopNav",
  data() {
    return {
      isActive: false,
    };
  },
  components: {},
  methods: {
    toggle() {
      this.isActive = !this.isActive;
      this.$emit('change-mode', this.isActive )
      console.log('emit child')
    },
  },
};
</script>

Answer 1

从您提供的代码片段来看，App.vue 似乎有 isActive 道具而不是 data 来管理方法 enableDarkMode。由于how the data flow works in Vue props，Vue 的 props 不会被它们所属的组件更新。由于 App.vue 是 Top Nav 组件的父级，您可能希望它像这样：

App.vue

<template>
  <div id="app" :class="[isActive ? 'darkmode' : '']>
    <header>
      <top-nav @change-mode="enableDarkMode"></top-nav>
    </header>
    ...
  </div>
</template>

<script>

export default {
  name: "App",
  components: {
    TopNav,
  },
  // this is probably not needed because App.vue is the parent component
  // props: ['isActive'],
  data() {
    return {
      isActive: false,
    };
  },
  methods: {
    enableDarkMode(isActive) {
      // manages the data
      this.isActive = isActive;
    },
  },
};
</script>

顶部导航组件

<template>
  ...
  <div>
    <button
      :class="[isActive ? 'dark' : 'light']"
      @click="toggle">
        {{ isActive ? "DarkMode" : "LightMode" }}
    </button>
  </div>
</template>

<script>
export default {
  name: "TopNav",
  data() {
    return {
      isActive: false,
    };
  },
  components: {},
  methods: {
    toggle() {
      this.isActive = !this.isActive;
      this.$emit('change-mode', this.isActive )
      console.log('emit child')
    },
  },
};
</script>

VueJS 子组件按钮更改父组件的 class

VueJS child component button changes class of parent

vue.js

vue-component