2

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

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

代码是this.$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>
4

1 回答 1

2

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

在您的 main.js 中添加一行

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

然后在有抽屉的组件中：

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

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

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

实际上，您可以放弃这window.两个电话，但这取决于您的个人喜好。

于 2017-05-16T01:51:08.390 回答