vue实现左右菜单联动实现
Vue 实现左右菜单联动
使用事件总线通信
在 Vue 中可以通过事件总线实现左右菜单的通信。创建一个中央事件总线实例，让左右菜单通过事件监听和触发实现联动。
// eventBus.js
import Vue from 'vue';
export const EventBus = new Vue();在左侧菜单组件中触发事件：
// LeftMenu.vue
import { EventBus } from './eventBus';
methods: {
handleMenuClick(item) {
EventBus.$emit('menu-selected', item.id);
}
}在右侧菜单组件中监听事件：
// RightMenu.vue
import { EventBus } from './eventBus';
created() {
EventBus.$on('menu-selected', (menuId) => {
this.activeMenuId = menuId;
});
}使用 Vuex 状态管理
对于更复杂的联动逻辑，可以使用 Vuex 集中管理状态。定义共享的状态和 mutations，让左右菜单通过 commit 和 getters 实现联动。
// store.js
export default new Vuex.Store({
state: {
activeMenuId: null
},
mutations: {
setActiveMenu(state, menuId) {
state.activeMenuId = menuId;
}
}
});左侧菜单触发 mutation：
// LeftMenu.vue
methods: {
handleMenuClick(item) {
this.$store.commit('setActiveMenu', item.id);
}
}右侧菜单响应状态变化：
// RightMenu.vue
computed: {
activeMenuId() {
return this.$store.state.activeMenuId;
}
}使用父子组件通信
如果左右菜单是父子组件关系，可以通过 props 和 $emit 实现联动。父组件维护共享状态，通过 props 传递给子组件，子组件通过事件通知父组件更新状态。
父组件：
// ParentComponent.vue
<template>
<div>
<LeftMenu :activeId="activeMenuId" @menu-change="handleMenuChange" />
<RightMenu :activeId="activeMenuId" />
</div>
</template>
<script>
export default {
data() {
return {
activeMenuId: null
};
},
methods: {
handleMenuChange(menuId) {
this.activeMenuId = menuId;
}
}
};
</script>左侧子组件：
// LeftMenu.vue
<template>
<div>
<div v-for="item in menuItems" @click="$emit('menu-change', item.id)">
{{ item.name }}
</div>
</div>
</template>右侧子组件：
// RightMenu.vue
<template>
<div>
<div v-if="activeId === 1">Content for Menu 1</div>
<div v-if="activeId === 2">Content for Menu 2</div>
</div>
</template>
<script>
export default {
props: ['activeId']
};
</script>使用 provide/inject
对于深层嵌套的组件，可以使用 provide/inject 实现跨层级通信。祖先组件提供数据，后代组件注入使用。
祖先组件：
// Ancestor.vue
export default {
provide() {
return {
menuData: {
activeId: this.activeMenuId,
setActiveId: this.setActiveId
}
};
},
data() {
return {
activeMenuId: null
};
},
methods: {
setActiveId(id) {
this.activeMenuId = id;
}
}
};后代组件：
// Descendant.vue
export default {
inject: ['menuData'],
methods: {
handleClick() {
this.menuData.setActiveId(123);
}
}
};
