避免代码重复的全局组件使用（Nativescript Vue）

My nativescript vue应用程序底部有一个tabview，顶部有一个Stacklayout，用于操作栏/标题和类别。我不想在每页中重复选项卡视图和标题。我如何将这些作为全局组件，并在中间更改页面的其余部分，如果我选择不同的类别？

谢谢

这是我的密码：

<DockLayout class="screen" stretchLastChild="true">
<ScrollView dock="top">
                <StackLayout orientation="vertical">
                    <GridLayout class="header" rows="auto" columns="*,auto,auto">
                        <Label text="Test" row="0" col="0" verticalAlignment="center"></Label>
                        <Image src="~/assets/images/search.png"
                            verticalAlignment="center" marginRight="25" row="0"
                            col="1" height="22" />
                        <Button class="logoutButton" text="Logout" fontSize="14" verticalAligment="middle" marginRight="10" row="0" col="2" @tap="logout"></Button>
                    </GridLayout>
                    <GridLayout class="tabs" columns="*,*,*,*,*" height="30" :selectedIndex="selectedIndex">
                        <Label class="active" text="Category1" row="0" col="0"></Label>
                        <Label text="Category2" row="0" col="1"></Label>
                        <Label text="Category3" row="0" col="2"></Label>
                        <Label text="Category4" row="0" col="3"></Label>
                        <Label text="Category5" row="0" col="4"></Label>
                    </GridLayout>
                </StackLayout>
            </ScrollView>
            <TabView :selectedIndex="selectedIndex">
              <TabViewItem title="Tab1" iconSource="~/images/icons/coins.png" @tap="goTo1()">
                <Label text="Tab1"/>
              </TabViewItem>
              <TabViewItem title="Tab2" iconSource="~/images/icons/settings.png" @tap="goTo2()">
                <Label text="Tab2"/>
              </TabViewItem>
              <TabViewItem title="Tab3" iconSource="~/images/icons/add_user_male.png" @tap="goTo3()">
                <Label text="Tab3"/>
              </TabViewItem>
            </TabView>
        </DockLayout>

---

您只需相应地调整您的帧即可。使用GridLayout作为应用程序的根目录，将TabView和StackLayout放在其中，然后将框架放在TabViewItem中，以便在TabViewItem中导航时，其他所有内容保持不变

       <DockLayout class="screen" stretchLastChild="true">
         <ScrollView dock="top">
            <StackLayout orientation="vertical">
                <GridLayout class="header" rows="auto" columns="*,auto,auto">
                    <Label text="Test" row="0" col="0" verticalAlignment="center"></Label>
                    <Image src="~/assets/images/search.png"
                        verticalAlignment="center" marginRight="25" row="0"
                        col="1" height="22" />
                    <Button class="logoutButton" text="Logout" fontSize="14" verticalAligment="middle" marginRight="10" row="0" col="2" @tap="logout"></Button>
                </GridLayout>
                <GridLayout class="tabs" columns="*,*,*,*,*" height="30" :selectedIndex="selectedIndex">
                    <Label class="active" text="Category1" row="0" col="0"></Label>
                    <Label text="Category2" row="0" col="1"></Label>
                    <Label text="Category3" row="0" col="2"></Label>
                    <Label text="Category4" row="0" col="3"></Label>
                    <Label text="Category5" row="0" col="4"></Label>
                </GridLayout>
            </StackLayout>
        </ScrollView>
        <TabView :selectedIndex="selectedIndex">
          <TabViewItem title="Tab1" iconSource="~/images/icons/coins.png" @tap="goTo1()">
            <Frame id="frame1">
               <YourTab1Comp></YourTab1Comp>
            </Frame>
          </TabViewItem>
          <TabViewItem title="Tab2" iconSource="~/images/icons/settings.png" @tap="goTo2()">
            <Frame id="frame2">
               <YourTab2Comp></YourTab2Comp>
            </Frame>
          </TabViewItem>
          <TabViewItem title="Tab3" iconSource="~/images/icons/add_user_male.png" @tap="goTo3()">
            <Frame id="frame3">
               <YourTab3Comp></YourTab3Comp>
            </Frame>
          </TabViewItem>
        </TabView>
    </DockLayout>

当您想在特定选项卡中导航时，必须提及帧id

this.$navigateTo(SomeComp, {
  frame: 'frame1' // <frame id, or ref, or instance>
});

this.$navigateTo（SomeComp{
框架：“框架1”//
});

我添加了我的代码，您能具体说明一下吗？我以前从未使用过框架。非常感谢。哇，非常感谢！我是来执行这个的！