Monaca Onsen UI Discord Chat Github Repo

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?


  • Onsen UI

    @丶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?


  • Onsen UI

    @丶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.