Vuetify导航抽屉：如何从外部组件控制子菜单显示

针对无直接关联的子组件控制App.vue导航抽屉子菜单显示的问题，这里提供几种实用的实现方案：

方案1：全局状态管理（Pinia/Vuex，推荐） #

适合中大型项目，状态管理更规范，便于后续维护。

步骤1：创建状态仓库（以Pinia为例） #

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

export const useMenuStore = defineStore('menu', {
  state: () => ({
    // 存储控制子菜单显示的状态
    showReviewMenu: false
  }),
  actions: {
    // 更新状态的方法
    setReviewMenuVisible(value) {
      this.showReviewMenu = value
    }
  }
})

步骤2：在App.vue中使用状态控制菜单显示 #

<template>
  <v-navigation-drawer>
    <!-- 其他主菜单项 -->
    <v-list-item
      v-show="menuStore.showReviewMenu"
      @click="$vuetify.goTo('#somelink')"
    >
      <v-list-item-content>
        <v-list-item-title>Review</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </v-navigation-drawer>
</template>

<script setup>
import { useMenuStore } from '@/stores/menuStore'
const menuStore = useMenuStore()
</script>

步骤3：在子组件中触发状态更新 #

<template>
  <v-btn @click="toggleReviewMenu">触发菜单显示</v-btn>
</template>

<script setup>
import { ref } from 'vue'
import { useMenuStore } from '@/stores/menuStore'

const menuStore = useMenuStore()
// 你的业务变量
const totalResult = ref(true)

const toggleReviewMenu = () => {
  menuStore.setReviewMenuVisible(totalResult.value)
}
</script>

方案2：事件总线（Vue3用mitt） #

适合小型项目，实现简单快速。

步骤1：创建事件总线实例 #

先安装依赖：npm install mitt

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

步骤2：在App.vue中监听事件 #

<template>
  <v-navigation-drawer>
    <v-list-item
      v-show="showReviewMenu"
      @click="$vuetify.goTo('#somelink')"
    >
      <v-list-item-content>
        <v-list-item-title>Review</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </v-navigation-drawer>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { eventBus } from '@/utils/eventBus'

const showReviewMenu = ref(false)

// 挂载时监听事件
onMounted(() => {
  eventBus.on('update-review-menu', (value) => {
    showReviewMenu.value = value
  })
})

// 卸载时移除监听，避免内存泄漏
onUnmounted(() => {
  eventBus.off('update-review-menu')
})
</script>

步骤3：在子组件中触发事件 #

<template>
  <v-btn @click="sendMenuToggleEvent">触发菜单显示</v-btn>
</template>

<script setup>
import { ref } from 'vue'
import { eventBus } from '@/utils/eventBus'

const totalResult = ref(true)

const sendMenuToggleEvent = () => {
  eventBus.emit('update-review-menu', totalResult.value)
}
</script>

方案3：Provide/Inject #

适合多层嵌套组件的场景，若子组件通过路由渲染在App.vue的router-view中，也可使用这种方式。

步骤1：在App.vue中提供状态和更新方法 #

<template>
  <v-navigation-drawer>
    <v-list-item
      v-show="showReviewMenu"
      @click="$vuetify.goTo('#somelink')"
    >
      <v-list-item-content>
        <v-list-item-title>Review</v-list-item-title>
      </v-list-item-content>
    </v-list-item>
  </v-navigation-drawer>
  <!-- 子组件通过路由渲染在这里 -->
  <router-view />
</template>

<script setup>
import { ref, provide } from 'vue'

const showReviewMenu = ref(false)

const updateReviewMenu = (value) => {
  showReviewMenu.value = value
}

// 提供给后代组件访问的状态和方法
provide('reviewMenu', {
  showReviewMenu,
  updateReviewMenu
})
</script>

步骤2：在子组件中注入并使用 #

<template>
  <v-btn @click="updateMenuState">触发菜单显示</v-btn>
</template>

<script setup>
import { inject, ref } from 'vue'

// 注入App.vue提供的方法
const { updateReviewMenu } = inject('reviewMenu')
const totalResult = ref(true)

const updateMenuState = () => {
  updateReviewMenu(totalResult.value)
}
</script>

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