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.