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

Message Pump でイベントを使用することをお勧めします。

main.js 内に行を追加します

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

次に、ドロワーを持つコンポーネントで：

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

そして、引き出しを開く必要があるコンポーネント

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

現実的には、2 つの通話から をドロップすることもできますwindow.が、それは個人的な好み次第です。

于 2017-05-16T01:51:08.390 に答える