在Quasar框架VueJS中打开另一个组件的抽屉-Java 学习之路

我是前端开发的新手，并开始在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>

1 回答

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

在你的main.js里面添加一行
```
...
window.MessagePump = new Vue()
...
```
然后在你的组件中有抽屉：
```
...
mounted () {
    window.MessagePump.$on(
        'openLeftDrawer',
        () => {
          this.$refs.leftDrawer.open()
        }
    )
}
...
```
以及需要打开抽屉的任何组件
```
...
window.MessagePump.$emit('openLeftDrawer')
...
```
实际上你可以从两个电话中删除 window. ，但这取决于你的个人喜好 .
回复于 2024-05-03T18:04:16+08:00

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

1 回答

相关问题