Vue.js 中实现独立子菜单的动态样式切换

理解问题：单一状态管理的局限性

在 Vue.js 开发中，一个常见的需求是当用户点击某个菜单项时，显示或隐藏其对应的子菜单。然而，如果所有子菜单都绑定到同一个响应式状态变量，就会出现一个问题：点击任何一个父级菜单项，所有子菜单都会同时显示或隐藏。

考虑以下初始代码示例：

HTML 结构：

立即学习“前端免费学习笔记（深入）”；

   
Menu
   
Profile
      
 
          
History
      
   
   
Media
      

          
Photos
          
Videos
      
   

Vue JavaScript (Composition API):

在这个例子中，data.sub_menu_show 是一个布尔值，用于控制子菜单的显示状态。当 toggleSubMenu 方法被调用时，它会反转 data.sub_menu_show 的值。由于所有子菜单都可能（或被期望）绑定到这个单一状态，结果是点击“Profile”或“Media”时，所有子菜单都会同时被切换，这显然不符合“仅切换点击的子菜单”的需求。

解决方案：独立状态管理与唯一标识符

要实现独立子菜单的切换，核心思想是为每个可切换的子菜单维护一个独立的响应式状态。这意味着我们需要一个数据结构来存储每个子菜单的开启/关闭状态，并且在事件触发时，只更新对应子菜单的状态。

我们将使用 Vue 3 的 Composition API 来实现这一目标。

1. 状态设计

我们可以使用一个对象来存储每个子菜单的独立状态，其中对象的键作为子菜单的唯一标识符，值则表示其当前的显示状态（例如 true 为显示，false 为隐藏）。

奥硕企业网站管理系统3.0.2

临沂奥硕软件有限公司拥有国内一流的企业网站管理系统，奥硕企业网站管理系统真正会打字就会建站的管理系统，其强大的扩展性可以满足企业网站实现各种功能（唯一集成3O多套模版的企业建站系统）奥硕企业网站管理系统具有一下特色功能1、双语双模（中英文采用单独模板设计，可制作中英文不同样式的网站）2、在线编辑JS动态菜单支持下拉效果，同时生成中文，英文，静态3个JS菜单3、在线制作并调用FLASH展示动画4、自

下载

import { ref } from 'vue'

const toggleStates = ref({
    profile: false, // Profile 子菜单的独立状态
    media: false    // Media 子菜单的独立状态
});

这里使用 ref 来包裹整个 toggleStates 对象，因为我们可能会修改其内部的属性。

2. 事件处理器的优化

toggleSubMenu 方法现在需要接收一个参数，这个参数就是我们为子菜单定义的唯一标识符。通过这个标识符，我们可以精确地更新对应子菜单的状态。

const toggleSubMenu = (type) => {
    // 根据传入的type更新对应子菜单的状态
    toggleStates.value[type] = !toggleStates.value[type];
}

3. HTML 结构的调整

在 HTML 中，我们需要做两处调整：

• 事件绑定： 在每个
• 元素的 @click 事件中，调用 toggleSubMenu 方法并传入该子菜单的唯一标识符。
• 类绑定： 每个
  元素应绑定到 toggleStates 对象中对应标识符的状态。

优化后的 HTML 结构：

   
Menu
   
Profile
      

          
History
      
   
   
Media
      

          
Photos
          
Videos
      
   

请注意，@click="() => toggleSubMenu('profile')" 这种写法是为了确保 toggleSubMenu('profile') 在点击时才执行，而不是在渲染时立即执行。

4. 完整的 Vue.js 代码

结合上述修改，完整的 Vue.js 组件代码如下：

样式定义 (CSS)

为了使 :class="{ 'd-block': ... }" 生效，你需要在 CSS 中定义 d-block 类，例如：

.d-block {
    display: block !important; /* 或者其他你想要的显示样式 */
}

/* 默认隐藏子菜单 */
ul ul {
    display: none;
}

确保你的 CSS 规则能够正确地显示或隐藏子菜单。

总结与注意事项

• 独立状态是关键： 实现独立 UI 组件行为的核心在于为每个组件维护其自身的响应式状态。避免使用全局单一状态来控制多个独立组件。
• 唯一标识符： 为每个可切换的子菜单提供一个唯一的标识符（如字符串），这使得在事件处理中能够精确地定位和修改目标状态。
• 可扩展性： 这种模式具有很好的可扩展性。如果你有更多的子菜单，只需在 toggleStates 对象中添加新的键值对即可，无需修改 toggleSubMenu 函数的逻辑。
• 代码清晰度： 通过这种方式，代码的意图更加明确，每个子菜单的行为都是独立的，降低了组件之间的耦合度，提高了可维护性。
• ref vs reactive： 在这里使用 ref 包装整个 toggleStates 对象是可行的，因为它允许我们直接通过 toggleStates.value[type] 来修改内部属性。如果 toggleStates 是一个 reactive 对象，你可以直接修改 toggleStates[type]，但 ref 在处理更复杂的对象替换或与模板绑定时通常更灵活。

通过采纳这种独立状态管理的方法，你可以轻松地在 Vue.js 应用中实现精细化的 UI 交互控制，确保用户体验的流畅和预期行为的准确性。