Quasar抽屉组件切换状态异常问题求助

问题分析 #

当前组件拆分方案的两个问题根源均为父组件与抽屉组件的状态未双向同步：

• 点击汉堡菜单需两次才能关闭抽屉：当通过点击背景关闭抽屉时，抽屉内部状态已变为false，但父组件的leftDrawerOpen仍保持true。此时点击汉堡菜单，第一次取反会将true变为false（与抽屉当前状态一致，无视觉变化），第二次取反才会触发状态切换，导致需要两次点击才能关闭。
• 点击背景无法关闭抽屉：q-drawer默认支持点击背景关闭，但仅通过单向props传递状态，未监听抽屉内部的状态更新事件，导致抽屉关闭时父组件状态未同步，视觉上表现为无法关闭。

修复方案 #

1. 给抽屉组件添加状态同步事件 #

修改LeftDrawer组件，监听q-drawer的update:model-value事件，将内部状态变化同步给父组件：

<q-drawer
  show-if-above
  :model-value="leftDrawerOpen"
  @update:model-value="$emit('update:leftDrawerOpen', $event)"
  side="left"
  :width="283"
  bordered
>
</q-drawer>

export default {
  props: ['leftDrawerOpen']
}

2. 父组件使用v-model简化双向绑定 #

在父组件中用v-model替代单向props传递，自动完成状态同步：

<MainHeader @toggle-left-drawer="toggleLeftDrawer"/>
<LeftDrawer v-model:leftDrawerOpen="leftDrawerOpen" />

export default {
  components: { MainHeader, LeftDrawer },
  setup () {
    const leftDrawerOpen = ref(false)

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

    return {
      leftDrawerOpen,
      toggleLeftDrawer
    }
  }
}

3. （可选）简化Header组件的事件触发 #

Header组件可直接触发事件，无需额外定义函数：

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

export default {
  // 无需额外setup逻辑
}

修复后效果 #

• 点击汉堡菜单可直接切换抽屉状态，无需多次点击；
• 点击抽屉背景可正常关闭抽屉，父组件状态会同步更新。

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