VueJS暗黑/亮色主题切换失效问题求助

问题核心 #

点击太阳图标后toggle函数可执行，但主题未切换，根源在于两处代码错误：

• 子组件Navbar的emit调用方式不符合<script setup>语法规范，且侧边栏的太阳图标未绑定点击事件
• 父组件App中操作响应式变量时未遵循ref的使用规则，导致丢失响应式

修复步骤 #

1. 修正Navbar.vue的emit调用与点击事件 #

在<script setup>语法中，defineEmits会返回一个emit函数，不能使用this.$emit；同时需给侧边栏的太阳图标补充点击事件：

修改Navbar.vue的script部分：

<script setup>
import { RouterLink, RouterView } from 'vue-router'

// 定义emit并获取对应的调用函数
const emit = defineEmits(['toggle'])
</script>

修改template中的两个太阳图标：

<!-- 顶部移动端太阳图标 -->
<i class="bi bi-sun-fill d-block d-lg-none" id="icon" @click="emit('toggle')"></i>

<!-- 侧边栏桌面端太阳图标 -->
<i class="bi bi-sun-fill d-none d-lg-block mysun" id="icon" @click="emit('toggle')"></i>

2. 修正App.vue的响应式变量操作 #

ref创建的变量必须通过.value修改内部值，直接赋值会破坏响应式绑定：

修改App.vue的script部分：

<script setup>
import { RouterLink, RouterView } from 'vue-router'
import Navbar from './components/Navbar.vue'

import { ref } from 'vue'
const mode = ref('dark')
function toggle() {
  if (mode.value === "dark") {
    mode.value = "light"
    console.log(mode.value)
  } else {
    mode.value = "dark"
    console.log(mode.value)
  }
}
</script>

效果验证 #

完成修改后：

• 两个太阳图标点击都会触发主题切换逻辑
• mode变量的修改会保持响应式，自动更新App根元素的class
• 主题样式会根据dark/light类名正常切换

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