使用全局组件以避免代码重复 (Nativescript-Vue)

Question

我的 nativescript-vue 应用在底部有一个 tabview，在顶部有一个 Stacklayout，用于 actionbar/header 目的和类别。我不想在每个页面中重复 tabview 和 header。如果我更改 select 不同的类别，如何将它们用作全局组件并在中间刷新页面的其余部分？

谢谢！

这是我的代码：

<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>

Answer 1

你只需要相应地调整你的框架。使用 GridLayout 作为应用程序的根目录，将 TabView 和 StackLayout 放在里面，然后将 Frame 放在 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>
});

使用全局组件以避免代码重复 (Nativescript-Vue)

Global components usage to avoid code duplication (Nativescript-Vue)

nativescript

nativescript-vue