vue.js - 从 Quasar 框架 VueJS 中的另一个组件打开抽屉

Question

我是前端开发新手，开始使用基于VueJS的Quasar。

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

代码是this.$parent.$children[2].$refs.leftDrawer

组件 Drawer.Vue 内容是一个抽屉标签，其引用如下:

<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>

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>

Answer 1

最好的选择是在消息泵上使用事件。

在 main.js 中添加一行

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

然后在有抽屉的组件中:

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

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

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

实际上，您可以从两个调用中删除 window.，但这取决于您的个人喜好。