How to change tabbar in page components ?

丶JavaScript

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?

Fran Diox

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

丶JavaScript

@Fran-Diox Do u mean add a prop function in ons-tabbar to change current page?

Fran Diox

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