Vue中如何不用原生DOM操作切换其他组件内元素的类名

你当前用document.querySelector直接操作其他组件DOM的写法不符合Vue状态驱动的核心设计理念，会导致逻辑与视图耦合、DOM结构变动后逻辑失效、难以维护等问题，可根据项目复杂度选择以下几种替代方案：

方案1：全局状态管理（推荐，适用于中大型项目） #

用Pinia（Vue3官方推荐）/Vuex存储侧边栏展开状态，所有需要响应侧边栏变化的组件直接绑定状态即可：

1. 定义全局状态store（以Pinia为例）

// stores/layout.js
import { defineStore } from 'pinia'

export const useLayoutStore = defineStore('layout', {
  state: () => ({
    isSidebarCollapsed: false
  }),
  actions: {
    toggleSidebar() {
      this.isSidebarCollapsed = !this.isSidebarCollapsed
    }
  }
})

2. 修改Sidebar.vue的触发逻辑

<i class='bx bx-menu' v-on:click="toggleMenu()" id="btn"></i>
<script>
import { useLayoutStore } from '@/stores/layout'

export default {
  methods: {
    toggleMenu() {
      const layoutStore = useLayoutStore()
      layoutStore.toggleSidebar()
    }
  }
}
</script>

3. 在对应组件内动态绑定类名
   以Header组件为例：

<template>
  <div class="header" :class="{ changeWidth: layoutStore.isSidebarCollapsed }">
    <!-- 头部内容 -->
  </div>
</template>
<script>
import { useLayoutStore } from '@/stores/layout'

export default {
  setup() {
    const layoutStore = useLayoutStore()
    return { layoutStore }
  }
}
</script>

Footer、#app-content、.main-content所在的组件同理，根据自身需要绑定对应的类名即可。

方案2：父组件状态托管（适用于组件层级浅的小型项目） #

如果Sidebar、Header、Footer等组件都是同一个父组件（比如Layout.vue）的直接子组件，可以把状态提到父组件统一管理：

1. 父组件Layout.vue中定义状态和修改逻辑：

<template>
  <Sidebar @toggle-menu="isSidebarCollapsed = !isSidebarCollapsed" />
  <Header :class="{ changeWidth: isSidebarCollapsed }" />
  <div id="app-content" :class="{ addOpacity: isSidebarCollapsed }">
    <div class="main-content" :class="{ 'main-content_move-left': isSidebarCollapsed }">
      <!-- 主体内容 -->
    </div>
  </div>
  <Footer :class="{ changeWidth: isSidebarCollapsed }" />
</template>
<script>
export default {
  data() {
    return {
      isSidebarCollapsed: false
    }
  }
}
</script>

2. Sidebar.vue中触发事件通知父组件：

methods: {
  toggleMenu() {
    this.$emit('toggle-menu')
  }
}

方案3：事件总线（适用于中型项目不想引入状态管理的场景） #

Vue3没有内置事件总线，可以引入mitt库实现跨组件事件通知：

1. 安装mitt后创建总线实例：

// utils/bus.js
import mitt from 'mitt'
export const bus = mitt()

2. Sidebar组件触发事件：

import { bus } from '@/utils/bus'
// ...
methods: {
  toggleMenu() {
    bus.emit('toggle-sidebar')
  }
}

3. 各个需要响应的组件监听事件修改本地状态：

import { bus } from '@/utils/bus'
// ...
mounted() {
  bus.on('toggle-sidebar', () => {
    this.isSidebarCollapsed = !this.isSidebarCollapsed
  })
},
beforeUnmount() {
  bus.off('toggle-sidebar') // 销毁前取消监听，避免内存泄漏
}

最后在组件模板中动态绑定类名即可。

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