Vue.js 从Quasar framework VueJS中的另一个组件打开抽屉

我是前端开发的新手，开始在VueJS上使用Quasar base

问题是如何从另一个组件打开抽屉？现在我有了一个解决方案，可以选择一个DOM元素并对其调用open（），但我认为这不是最好的

代码为此。$parent.$children[2]。$refs.leftDrawer

组件抽屉。Vue内容是一个抽屉标记，带有ref，如：

<q-drawer ref="leftDrawer">
....
</q-drawer>

....

组件headerbox.vue的内容为：

<template>
...
<button class="hide-on-drawer-visible" @click="leftDrawer.open()">
...
</template>
<script>
...
    computed: {
      leftDrawer () {
        return (this.$parent.$children[2].$refs.leftDrawer)
      }
...
</script>

...
...
...
计算：{
左抽屉（）{
返回（此.$parent.$children[2].$refs.leftDrawer）
}
...

MainApp Vue内容：

<template>
 <q-layout>
 <headerbox slot="header"></headerbox>
 <drawer></drawer>
 ...
</q-layout>
</template>

<script>
  ...
  import headerbox from './header.vue'
  import drawer from './drawer.vue'
  ...
  components: {
    headerbox,
    drawer,
    }
  ...
</script>

...
...
从“./header.vue”导入headerbox
从“/drawer.vue”导入抽屉
...
组成部分：{
头箱，
抽屉，
}
...

您最好在消息泵上使用事件

在main.js中添加一行

...
window.MessagePump = new Vue()
...

然后在具有抽屉的组件中：

...
mounted () {
    window.MessagePump.$on(
        'openLeftDrawer',
        () => {
          this.$refs.leftDrawer.open()
        }
    )
}
...

以及任何需要打开抽屉的部件

...
window.MessagePump.$emit('openLeftDrawer')
...

实际上，您可以从两次通话中删除

窗口。

，但这取决于您的个人喜好