Notice: The Monaca & Onsen UI Community Forum is shutting down.
For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.
Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.
How to change tabbar in page components ?
-
this is my code
<template> <v-ons-page> <v-ons-toolbar> <div class="center">{{title}}</div> </v-ons-toolbar> <v-ons-tabbar position="auto"> <template slot="pages"> <keep-alive> <component :is="page"></component> </keep-alive> </template> <v-ons-tab v-for="(pageItem,pageIndex) in pageList" :key="pageIndex" @click.prevent="showPage(pageItem.pageComponents,pageItem.title)" :active="page === pageItem.pageComponents" :icon="pageItem.icon" :active-icon="pageItem.active" :label="pageItem.label"></v-ons-tab> </v-ons-tabbar> </v-ons-page> </template>
and I want to change tabbar in page components,How to do this?
-
@丶JavaScript Do you mean changing the current page from a button inside pages? You’ll need to pass a prop function to modify your
page
variable or emit an event to do it.
-
@Fran-Diox Do u mean add a prop function in
ons-tabbar
to change current page?
-
@丶JavaScript said:
<component :is=“page” :set-page="() => showPage(…)"></component>
<component :is=“page” @page=“showPage(…)”></component>
You pass props or event handler to the page components so you can communicate with them.