VueJS中子组件按钮如何修改父组件类实现明暗模式切换

代码中导致功能失效的核心问题 #

• 错误地将全局开关值 isActive 定义为 App 组件的 props：App 作为项目根组件不存在上层父组件，永远没有外部传值给这个 props，对应取值永远为 undefined，类绑定逻辑从一开始就拿不到有效布尔值
• App 组件接收到子组件抛来的事件参数后，只执行了打印操作，没有把值赋值给本地响应式状态，哪怕事件传递成功，视图也不会触发更新
• 存在遗漏的依赖引入：App.vue 注册 TopNav 组件时，没有补充对应的 import 语句，运行时会直接报组件未找到的错误

最小修复方案（保留现有组件内部状态逻辑） #

只需要修改 App.vue 里的三处问题即可跑通当前流程：

1. 将 isActive 从 props 配置移动到本地 data 中作为响应式状态维护，给初始值 false 对应默认浅色模式
2. 在 enableDarkMode 方法中，将子组件抛出的参数赋值给本地的 isActive，触发视图更新
3. 补充 TopNav 组件的 import 语句

修正后的完整 App.vue 代码如下：

<template>
  <div id="app" :class="isActive ? 'darkmode' : ''">
    <header>
      <top-nav @change-mode="enableDarkMode"></top-nav>
    </header>
    <!-- 其他页面内容 -->
  </div>
</template>

<script>
// 补充遗漏的组件引入，路径替换为你实际的TopNav文件位置即可
import TopNav from './components/TopNav.vue'

export default {
  name: "App",
  components: {
    TopNav,
  },
  data() {
    return {
      isActive: false
    }
  },
  methods: {
    enableDarkMode(isActiveFromChild) {
      // 核心修复：将子组件传值同步到本地状态
      this.isActive = isActiveFromChild
    },
  },
};
</script>

长期优化：解决双组件状态不同步的隐患 #

当前实现里 isActive 分别在 App 和 TopNav 组件内部各存了一份，后续如果有其他逻辑需要修改深色模式开关（比如用户手动在设置页切换），两个组件存的状态会出现不一致，导致按钮显示状态和实际全局类名不匹配。
可以把全局深色模式的状态完全收归 App 层统一维护，通过 props 传递给 TopNav，TopNav 只负责触发点击事件，不再维护内部状态：

• 调整后的 TopNav 组件代码：

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

<script>
export default {
  name: "TopNav",
  // 从父组件接收全局的开关状态
  props: {
    isActive: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    toggle() {
      // 不需要内部维护状态，直接抛出取反后的新状态给父组件
      this.$emit('change-mode', !this.isActive)
    },
  },
};
</script>

• App 层的监听方法可以简化为直接更新状态，不需要额外中转：

methods: {
  enableDarkMode(newState) {
    this.isActive = newState
  }
}

内容的提问来源于stack exchange，提问作者user7795119