NativeScript Vue：如何添加将在整个应用程序中保留的底部导航组件？

Question

我正在使用NativeScript Vue，我想添加一个带有3个图标（主页，帐户，购物车）的iOS底部导航栏。我宁愿看看是否可以自己完成此操作而无需为其添加插件。在我的App.vue上显示导航栏组件很简单，但是当Vue文件更改时，如何在其余组件中保持这种状态呢？ 我要在main.js中定义它，并使它成为可全局访问的组件吗？

Answer 1

如果您不想使用现有的TabView并且了解自定义UI组件的优缺点，则可以考虑使用包装页面内容的带槽组件。

PageFrame.vue

<template>
    <Page>
        <GridLayout rows="auto * auto">
            <ActionBarComponent row="0" :title="title" />
            <GridLayout row="1">
                <slot />
            </GridLayout>
            <NavBarComponent row="2" :section="section" />
        </GridLayout>
    </Page>
</template>

Home.vue

<template>
    <PageFrame title="Home" section="home">
        <!-- page content -->
    </PageFrame>
</template>

使用section道具在导航栏中突出显示当前页面。