当前位置：首页 > VUE

vue如何实现左右联动

2026-01-21 14:40:06VUE

Vue 实现左右联动的方法

左右联动通常指两个独立的组件或列表（如左侧菜单和右侧内容）在交互时能够同步更新。以下是几种常见的实现方式：

使用 v-model 和自定义事件

通过 v-model 绑定数据，利用自定义事件实现父子组件间的通信。

<!-- 父组件 -->
<template>
  <div>
    <LeftPanel v-model="activeItem" @update="handleUpdate" />
    <RightContent :activeItem="activeItem" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeItem: null
    };
  },
  methods: {
    handleUpdate(item) {
      this.activeItem = item;
    }
  }
};
</script>

<!-- LeftPanel 子组件 -->
<template>
  <div>
    <div v-for="item in items" @click="$emit('update', item)">
      {{ item }}
    </div>
  </div>
</template>

使用 Vuex 状态管理

通过 Vuex 集中管理状态，实现跨组件数据共享。

// store.js
export default new Vuex.Store({
  state: {
    activeItem: null
  },
  mutations: {
    setActiveItem(state, item) {
      state.activeItem = item;
    }
  }
});

<!-- LeftPanel 组件 -->
<template>
  <div>
    <div v-for="item in items" @click="selectItem(item)">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    selectItem(item) {
      this.$store.commit('setActiveItem', item);
    }
  }
};
</script>

<!-- RightContent 组件 -->
<template>
  <div>
    {{ $store.state.activeItem }}
  </div>
</template>

使用 Event Bus

通过全局事件总线实现非父子组件间的通信。

// main.js
Vue.prototype.$eventBus = new Vue();

<!-- LeftPanel 组件 -->
<template>
  <div>
    <div v-for="item in items" @click="$eventBus.$emit('item-selected', item)">
      {{ item }}
    </div>
  </div>
</template>

<!-- RightContent 组件 -->
<template>
  <div>
    {{ selectedItem }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedItem: null
    };
  },
  created() {
    this.$eventBus.$on('item-selected', item => {
      this.selectedItem = item;
    });
  }
};
</script>

使用 provide/inject

适用于深层嵌套组件的通信，父组件通过 provide 提供数据，子组件通过 inject 注入。

<!-- 父组件 -->
<template>
  <div>
    <LeftPanel />
    <RightContent />
  </div>
</template>

<script>
export default {
  provide() {
    return {
      sharedState: this.sharedState
    };
  },
  data() {
    return {
      sharedState: {
        activeItem: null
      }
    };
  }
};
</script>

<!-- LeftPanel 子组件 -->
<template>
  <div>
    <div v-for="item in items" @click="sharedState.activeItem = item">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  inject: ['sharedState']
};
</script>