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

Question

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

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

代码为这$父$儿童[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.，但取决于您的个人偏好。