Vue3中兄弟组件间的值更新与方法调用问题

针对你遇到的Header和Left Drawer兄弟组件通信问题，下面是几种Vue3中实用的解决办法：

方案一：父组件中转（最直观的基础方案） #

核心思路是把抽屉的状态和切换逻辑提升到它们的共同父组件，通过props和自定义事件完成通信：

1. 父组件代码

<template>
  <Header @toggle-drawer="toggleLeftDrawer" />
  <LeftDrawer :left-drawer-open="leftDrawerOpen" />
</template>

<script setup>
import { ref } from 'vue'
import Header from './Header.vue'
import LeftDrawer from './LeftDrawer.vue'

const leftDrawerOpen = ref(false)

const toggleLeftDrawer = () => {
  leftDrawerOpen.value = !leftDrawerOpen.value
}
</script>

2. 修改Header组件
   把点击事件改为向父组件触发自定义事件：

<template>
  <q-btn dense flat round icon="menu" @click="$emit('toggle-drawer')" />
</template>

<script setup>
defineEmits(['toggle-drawer'])
</script>

3. 修改Left Drawer组件
   通过props接收父组件的状态，无需自行维护：

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

const props = defineProps({
  leftDrawerOpen: {
    type: Boolean,
    default: false
  }
})
</script>

<template>
  <q-drawer v-model="props.leftDrawerOpen" side="left">
    <!-- 抽屉内容 -->
  </q-drawer>
</template>

方案二：Provide/Inject（适合跨层级或兄弟组件共享） #

如果不想在父组件写过多逻辑，可以用Vue3的Provide/Inject特性，父组件提供状态和方法，子组件直接注入使用：

1. 父组件提供数据

<script setup>
import { ref, provide } from 'vue'
import Header from './Header.vue'
import LeftDrawer from './LeftDrawer.vue'

const leftDrawerOpen = ref(false)
const toggleLeftDrawer = () => {
  leftDrawerOpen.value = !leftDrawerOpen.value
}

provide('drawerState', {
  leftDrawerOpen,
  toggleLeftDrawer
})
</script>

2. Header组件注入并调用方法

<template>
  <q-btn dense flat round icon="menu" @click="toggleLeftDrawer" />
</template>

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

const { toggleLeftDrawer } = inject('drawerState')
</script>

3. Left Drawer组件注入状态

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

const { leftDrawerOpen } = inject('drawerState')
</script>

<template>
  <q-drawer v-model="leftDrawerOpen.value" side="left">
    <!-- 抽屉内容 -->
  </q-drawer>
</template>

方案三：Pinia状态管理（适合大型项目全局共享） #

如果项目后续有更多组件需要控制抽屉状态，用Pinia（Vue3官方推荐状态管理工具）更合适：

1. 创建Pinia Store

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

export const useDrawerStore = defineStore('drawer', {
  state: () => ({
    leftDrawerOpen: false
  }),
  actions: {
    toggleLeftDrawer() {
      this.leftDrawerOpen = !this.leftDrawerOpen
    }
  }
})

2. Header组件中使用Store

<template>
  <q-btn dense flat round icon="menu" @click="toggleDrawer" />
</template>

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

const drawerStore = useDrawerStore()
const toggleDrawer = () => {
  drawerStore.toggleLeftDrawer()
}
</script>

3. Left Drawer组件中使用Store

<script setup>
import { useDrawerStore } from '@/stores/drawer'
import { storeToRefs } from 'pinia'

const drawerStore = useDrawerStore()
const { leftDrawerOpen } = storeToRefs(drawerStore)
</script>

<template>
  <q-drawer v-model="leftDrawerOpen" side="left">
    <!-- 抽屉内容 -->
  </q-drawer>
</template>

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