本文将详细介绍在 Vue.js 应用中如何实现点击父级 `
- ` 子菜单的样式，而不是影响所有子菜单。我们将探讨使用单一状态管理导致的问题，并提供一种基于独立状态管理和唯一标识符的解决方案，确保每个子菜单能够独立地进行样式切换，从而提升用户体验和代码可维护性。
理解问题：单一状态管理的局限性
在 Vue.js 开发中，一个常见的需求是当用户点击某个菜单项时，显示或隐藏其对应的子菜单。然而，如果所有子菜单都绑定到同一个响应式状态变量，就会出现一个问题：点击任何一个父级菜单项，所有子菜单都会同时显示或隐藏。
考虑以下初始代码示例：
HTML 结构：
立即学习“前端免费学习笔记（深入）”；
<ul>
<li>Menu</li>
<li @click="toggleSubMenu">Profile
<ul> <!-- 期望在这里添加类 -->
<li>History</li>
</ul>
</li>
<li @click="toggleSubMenu">Media
<ul :class="{ 'd-block' : data.sub_menu_show}">
<li>Photos</li>
<li>Videos</li>
</ul>
</li>
</ul>Vue JavaScript (Composition API):
<script>
import { reactive } from 'vue'
export default {
setup(){
const data = reactive({
sub_menu_show: '', // 单一状态
});
const toggleSubMenu = () => {
data.sub_menu_show = !data.sub_menu_show // 切换这个单一状态
}
return{
data,
toggleSubMenu
}
}
}
</script>在这个例子中，data.sub_menu_show 是一个布尔值，用于控制子菜单的显示状态。当 toggleSubMenu 方法被调用时，它会反转 data.sub_menu_show 的值。由于所有子菜单都可能（或被期望）绑定到这个单一状态，结果是点击“Profile”或“Media”时，所有子菜单都会同时被切换，这显然不符合“仅切换点击的子菜单”的需求。
解决方案：独立状态管理与唯一标识符
要实现独立子菜单的切换，核心思想是为每个可切换的子菜单维护一个独立的响应式状态。这意味着我们需要一个数据结构来存储每个子菜单的开启/关闭状态，并且在事件触发时，只更新对应子菜单的状态。
我们将使用 Vue 3 的 Composition API 来实现这一目标。
1. 状态设计
我们可以使用一个对象来存储每个子菜单的独立状态，其中对象的键作为子菜单的唯一标识符，值则表示其当前的显示状态（例如 true 为显示，false 为隐藏）。
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 中，我们需要做两处调整：
- 事件绑定： 在每个 <li> 元素的 @click 事件中，调用 toggleSubMenu 方法并传入该子菜单的唯一标识符。
- 类绑定： 每个 <ul> 元素应绑定到 toggleStates 对象中对应标识符的状态。
优化后的 HTML 结构：
<ul>
<li>Menu</li>
<li @click="() => toggleSubMenu('profile')">Profile
<ul :class="{ 'd-block': toggleStates['profile'] }">
<li>History</li>
</ul>
</li>
<li @click="() => toggleSubMenu('media')">Media
<ul :class="{ 'd-block': toggleStates['media'] }">
<li>Photos</li>
<li>Videos</li>
</ul>
</li>
</ul>请注意，@click="() => toggleSubMenu('profile')" 这种写法是为了确保 toggleSubMenu('profile') 在点击时才执行，而不是在渲染时立即执行。
4. 完整的 Vue.js 代码
结合上述修改，完整的 Vue.js 组件代码如下：
<script>
import { ref } from 'vue' // 导入 ref
export default {
setup(){
// 使用 ref 创建一个响应式对象，存储每个子菜单的独立状态
const toggleStates = ref({
profile: false, // 'profile' 子菜单的初始状态为隐藏
media: false // 'media' 子菜单的初始状态为隐藏
});
// 定义切换子菜单状态的方法
const toggleSubMenu = (type) => {
// 根据传入的唯一标识符 'type'，切换对应子菜单的状态
toggleStates.value[type] = !toggleStates.value[type];
}
return {
toggleSubMenu, // 暴露给模板使用
toggleStates // 暴露给模板使用
}
}
}
</script>样式定义 (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 交互控制，确保用户体验的流畅和预期行为的准确性。
