How to get return object from left panel

Questions
1

I hope to close a left panel and return an object to the parent page when I click some buttons in the left panel. Now I know how to close and return to the sidebar, but I don’t know how to receive this return object on the parent page. Thanks!
This is my left panel:

    <f7-page name="home">
        <f7-block-title>Panels</f7-block-title>
        <f7-block strong>
            <f7-row>
                <f7-col width="50">
                    <f7-button fill @click="testClose('param1')"  panel-close="left">return 1</f7-button>
                </f7-col>
                <f7-col width="50">
                    <f7-button fill @click="testClose('param2')" panel-close="left">return 2</f7-button>
                </f7-col>
            </f7-row>
        </f7-block>

    </f7-page>
</template>
<script>
    export default {
        name: "page-B-panel.vue",
        props: {
            foo: String,
        },
        methods:{
            testClose(retStr){
                console.log(retStr); // how return retStr to parent page
            },
        }
    }
</script>

My parent page:

<f7-button @click="changePanelLeft('home3')" panel-open="left">Left Panel3</f7-button><script>
  import panelA from '@/views/yxgz/qxjl/page-a-panel';
  import panelB from '@/views/yxgz/qxjl/page-b-panel';
  import panelC from '@/views/yxgz/qxjl/page-c-panel';
  export default {
    mounted() {
      this.$root.panelComponent = panelC;
      this.$root.panelProps = {
        foo: 'bar',
      }
    },
    methods: {
      changePanelLeft(str) {
        debugger

        if(str=='home2'){
          this.$root.panelComponent = panelB;
        }else if(str=='home3'){
          this.$root.panelComponent = panelC;
        }
        this.$root.panelProps.foo =str
      },
    },
  }
</script>

My app.vue:

  <!-- Left panel with cover effect-->
    <f7-panel v-if="$root.panelComponent" left cover>
      <component :is="$root.panelComponent" v-bind="$root.panelProps"></component>
    </f7-panel>
....
</f7-app>
2

i would use events. maybe there is a better way. f7 has a pretty simple evt api;
https://framework7.io/docs/events.html#events-bus

child:

testClose(retStr) {
  console.log(retStr); // how return retStr to parent page
  myEvents.emit('panelCloseEvt', {some: 'Data', here: 'ok!'});
},

partent:

mounted() {
  this.$root.panelComponent = panelC;
  this.$root.panelProps = {
    foo: 'bar',
  }
  myEvents.on('panelCloseEvt', this.panelClose)
}
methods: {
  panelClose (payload) {
    // do something
  }
}

https://framework7.io/docs/events.html#events-bus

you can also use vue events.

1 Like
3

Thank you! Vue events is worked!Thank you very much!!

4

Also:

5

Its ok the video. But you change the text, he ask I hope to close a left panel and return an object to the parent page…

also, in the video you have two html elements with the same id=‘TitleApp’, maybe just a typo.

6

Doy you want onclose event. When the panel close return a object.

Try instanciate app,
Import app from ‘.path/to/framework7/’;
Into panel page