Question

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

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

代码是这个。$ parent。$ children [2]。$ refs.leftDrawer

组件Drawer.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>

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.，但这取决于您的个人偏好。

在Quasar框架VueJS中打开另一个组件的抽屉

1 个答案: