我可以将 BottomNavigation 与组件一起使用吗？

Question

我正在尝试显示底部导航，其中 TabContent 来自组件。现在，使用以下代码，我无法显示标签内容，也没有任何错误。

PageContainer.vue：

<template>
   <BottomNavigation selectedIndex="1" class="tab__container" @loaded="loaded">
     <TabStrip>
       <TabStripItem class="tab">
         <Label :text="text.groups" />
       </TabStripItem>

       <TabStripItem class="tab">
         <Label :text="text.mail" />
       </TabStripItem>
     </TabStrip>

     <TabContentItem>
       <GroupsScreen />
     </TabContentItem>

     <TabContentItem>
       <MailScreen />
     </TabContentItem>
   </BottomNavigation>
 </template>

<script >
   import GroupsScreen from './GroupsScreen';
   import MailScreen from './MailScreen';

   export default {
     components: {
       GroupsScreen,
       MailScreen,
     },

     data() {
       return {
           text: {
             groups: 'Groepen',
             mail: 'Berichten',
           },
       }
     },
   }
</script>

GroupsScreen.vue：

<template>
   <Frame @loaded="loaded">
       <ActionBar :title="text.groups" />
       <StackLayout class="page">
         <Label v-if="groupsLoading" text="Loading"></Label>
       </StackLayout>
   </Frame>
 </template>

这是否可能，或者我是否正在尝试做一些应该以其他方式完成的事情？

Answer 1

层次结构总是，

1. 框架
2. 页面
3. 内容（布局、滚动视图等）

一个框架只能承载一个页面，它不能直接承载内容。仅当您想在该特定容器中导航时才需要 Frame。

所以您的主要问题不是用 Page 元素包装您的 BottomNavigation。

Updated Playground