Vue组件事件传递：点击Toolbar按钮修改Drawer的isDrawerOpen状态

这是个非常典型的Vue组件间状态同步问题，刚好你的组件结构是父组件（AppRoot）包含两个子组件（Toolbar和Drawer），我给你梳理几种靠谱的实现方式，按需选择就行：

方法一：基础 Props + 自定义事件（最适合小型场景） #

这是Vue最原生的父子组件通信方案，不需要额外依赖，完全符合单向数据流原则，适合这种简单的状态同步需求。

实现步骤： #

1. 在AppRoot.vue中维护isDrawerOpen状态，并通过props传递给AppDrawer
2. 在AppRoot.vue定义切换状态的方法，通过自定义事件让AppToolbar触发这个方法

AppRoot.vue

<template>
  <div class="app-root">
    <!-- 监听Toolbar的切换事件 -->
    <AppToolbar @toggle-drawer="toggleDrawer" />
    <!-- 将状态通过props传给Drawer -->
    <AppDrawer :is-open="isDrawerOpen" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import AppToolbar from './AppToolbar.vue'
import AppDrawer from './AppDrawer.vue'

// 抽屉的开关状态
const isDrawerOpen = ref(false)

// 切换抽屉状态的方法
const toggleDrawer = () => {
  isDrawerOpen.value = !isDrawerOpen.value
}
</script>

AppToolbar.vue

<template>
  <header class="app-toolbar">
    <!-- 点击按钮触发自定义事件 -->
    <button @click="handleToggleDrawer">菜单</button>
  </header>
</template>

<script setup>
// 声明要触发的自定义事件
const emit = defineEmits(['toggle-drawer'])

const handleToggleDrawer = () => {
  // 通知父组件切换状态
  emit('toggle-drawer')
}
</script>

AppDrawer.vue

<template>
  <!-- 根据props控制抽屉显示/隐藏 -->
  <aside class="app-drawer" v-show="isOpen">
    <!-- 抽屉内容 -->
    <p>抽屉菜单内容</p>
  </aside>
</template>

<script setup>
// 接收父组件传递的props
const props = defineProps({
  isOpen: {
    type: Boolean,
    default: false
  }
})
</script>

方法二：Pinia全局状态管理（适合复杂项目） #

如果你的项目后续会有更多组件需要共享这个抽屉状态，或者状态逻辑变得复杂，推荐使用Vue官方推荐的Pinia做状态管理，把状态抽离到全局仓库，任何组件都能直接访问和修改。

实现步骤： #

1. 安装并初始化Pinia
2. 创建抽屉状态仓库
3. 在三个组件中分别调用仓库的状态和方法

安装Pinia

npm install pinia

创建状态仓库：src/stores/drawerStore.js

import { defineStore } from 'pinia'

export const useDrawerStore = defineStore('drawer', {
  // 定义状态
  state: () => ({
    isDrawerOpen: false
  }),
  // 定义修改状态的方法
  actions: {
    toggleDrawer() {
      this.isDrawerOpen = !this.isDrawerOpen
    }
  }
})

在main.js中注册Pinia

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

AppRoot.vue（无需再维护状态）

<template>
  <div class="app-root">
    <AppToolbar />
    <AppDrawer />
  </div>
</template>

<script setup>
import AppToolbar from './AppToolbar.vue'
import AppDrawer from './AppDrawer.vue'
</script>

AppToolbar.vue

<template>
  <header class="app-toolbar">
    <button @click="toggleDrawer">菜单</button>
  </header>
</template>

<script setup>
import { useDrawerStore } from '@/stores/drawerStore'

const drawerStore = useDrawerStore()

const toggleDrawer = () => {
  // 调用仓库的方法切换状态
  drawerStore.toggleDrawer()
}
</script>

AppDrawer.vue

<template>
  <aside class="app-drawer" v-show="drawerStore.isDrawerOpen">
    <p>抽屉菜单内容</p>
  </aside>
</template>

<script setup>
import { useDrawerStore } from '@/stores/drawerStore'

const drawerStore = useDrawerStore()
</script>

方法三：Provide/Inject（适合深层组件通信） #

如果你的组件层级很深，不想用props层层传递状态，可以用Vue的provide/inject特性，让父组件提供状态和方法，子组件直接注入使用。不过对于你的当前场景，这种方法有点大材小用，但也是可行方案：

AppRoot.vue

<template>
  <div class="app-root">
    <AppToolbar />
    <AppDrawer />
  </div>
</template>

<script setup>
import { ref, provide } from 'vue'
import AppToolbar from './AppToolbar.vue'
import AppDrawer from './AppDrawer.vue'

const isDrawerOpen = ref(false)
const toggleDrawer = () => {
  isDrawerOpen.value = !isDrawerOpen.value
}

// 提供状态和方法给所有子组件
provide('isDrawerOpen', isDrawerOpen)
provide('toggleDrawer', toggleDrawer)
</script>

AppToolbar.vue

<template>
  <header class="app-toolbar">
    <button @click="toggleDrawer">菜单</button>
  </header>
</template>

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

// 注入父组件提供的方法
const toggleDrawer = inject('toggleDrawer')
</script>

AppDrawer.vue

<template>
  <aside class="app-drawer" v-show="isDrawerOpen">
    <p>抽屉菜单内容</p>
  </aside>
</template>

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

// 注入父组件提供的状态
const isDrawerOpen = inject('isDrawerOpen')
</script>

方案选择建议： #

• 如果只是当前这三个组件的简单交互，优先用方法一，简单直接无额外依赖
• 如果项目有多个组件需要共享状态，或者状态逻辑复杂，选方法二，长期维护更方便
• 组件层级极深时再考虑方法三，避免滥用导致状态追踪困难

内容的提问来源于stack exchange，提问作者Rafael de Azeredo