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>