javascript - 尝试使用 ' :is="组件渲染组件时如何修复空白屏幕”'

Question

用 NativeScript-Vue for Android 编写，我试图根据按钮点击来渲染组件。我正在使用这个this plugin将应用程序包装在全局 SideDrawer 中用于快速导航。我使用SideDrawer内的按钮用于查看组件。这是我的App.vue看起来像:

<template>
    <Frame>
        <Page actionBarHidden="true">
            <GlobalDrawer>
                <template slot="content">
                    <Label class="drawer-header" text="Drawer"/>
                    <Button class="drawer-button" text="Home" @tap="currentComponent = 'Home'" />
                    <Button class="drawer-button" text="Info" @tap="currentComponent = 'InfoPage'" />
                    <Button class="drawer-close-button" @tap="$drawer.close()">Close</Button>
                </template>
                <template slot="frame">

                    <ContentView>

                        <component v-for="component in pagesArray" v-show="component === currentComponent" :is="component" v-bind:key="component" />

                    </ContentView>
                </template>
            </GlobalDrawer>
        </Page>
    </Frame>
</template>

<script>

import Home from './pages/Home.vue';
import InfoPage from './pages/InfoPage.vue';

export default {
    data () {
        return {
            pagesArray: ['Home', 'InfoPage'],
            currentComponent: 'Home'
        };
    },
    components: {
        Home, 
        InfoPage
    }    
}
</script>

这是 Home.vue 中的代码，我尝试渲染的默认组件:

<template>
    <Page>
        <navigation-bar />

        <GridLayout>
            <Label class="info" horizontalAlignment="center" verticalAlignment="center">
                <FormattedString>
                    <Span class="fa" text.decode="&#xf135; "/>
                    <Span :text="message"/>
                </FormattedString>
            </Label>
        </GridLayout>
    </Page>
</template>

<script>
import NavigationBar from '../components/NavigationBar.vue';

    export default {
        computed: {
            message() {
                return "Test Homepage";
            }
        },
        components: {
            NavigationBar
        }
    };
</script>

如果我直接使用<home /> <ContentView />内的组件它显示正常，但是当尝试动态显示它时，我得到一个空白页面；没有错误。对此有什么想法吗？

我使用 NativeScript CLI 在连接的 Samsung Galaxy S7 上运行该应用程序。 NativeScript-vue版本:^2.4.0 .

编辑[01.20.20]:详细解释我如何解决它。

在这里阅读:https://nativescript-vue.org/en/docs/routing/manual-routing/

在 Application.vue 中，我的 GlobalDrawer 如下所示:

<GlobalDrawer >
            <template class="global-drawer" slot="content">
                <ScrollView orientation="vertical" scrollBarIndicatorVisible="true" height="100%">
                    <StackLayout orientation="vertical">
                        <Label class="drawer-header" text="Menu"/>
                        <Button class="drawer-button" text="Home" ref="homeButton" @tap="homePageTap"/>
                        <Button class="drawer-button" text="System Oversight" @tap="infoPageTap" />
                        <Button class="drawer-button" text="Companies" @tap="companiesPageTap" />
                        <Button class="drawer-button" text="Calendar" @tap="calendarPageTap" />
                        <Button class="drawer-close-button" @tap="$drawer.close()">Close</Button>
                        <Label class="drawer-footer" text="By Bouvet" />
                    </StackLayout>
                </ScrollView>
            </template>
            <template slot="frame">

                    <frame-hub />

            </template>
</GlobalDrawer>

方法部分包含@tap-methods:

methods: { 
    homePageTap(args) {
        this.$navigateTo(Home, { frame: "main-frame" });
        this.$drawer.close();
    },
    infoPageTap(args) {
        this.$navigateTo(InfoPage, { frame: "main-frame" });
        this.$drawer.close();
    },
    companiesPageTap(args) {
        this.$navigateTo(CompaniesPage, { frame: "main-frame" });
        this.$drawer.close();
    },
    calendarPageTap(args) {
        this.$navigateTo(CalendarPage, { frame: "main-frame" });
        this.$drawer.close();
    }
},

是一个组件(FrameHub.vue)，如下所示:

<template>
    <Page actionBarHidden="true">
        <Frame id="main-frame">
            <home />
        </Frame>
    </Page>
</template>

<script>

import Home from './../pages/Home';
import InfoPage from './../pages/InfoPage.vue';
import CompaniesPage from './../pages/CompaniesPage.vue';
import CalendarPage from './../pages/Calendar.vue';

export default {
    components: {
        Home, 
        InfoPage,
        CompaniesPage,
        CalendarPage
    }  
}
</script>

Application.vue 中的 @tap-methods 更改在 FrameHub.vue 中的“main-frame”元素内渲染的组件。这样，GlobalDrawer 始终位于顶部，而用户可以自由地在页面之间切换。

我希望这对遇到同样问题的人有所帮助。我也确信这个解决方案可以改进。虽然我目前没有从事此工作，但请让我知道有关改进的信息。

Answer 1

nativescript-vue-global-drawer 的创建者插件在这里。

GlobalDrawer 的框架槽包含一个框架元素 ( here ) 来控制抽屉内的导航，如所述 here ，这意味着该插槽仅接受 Page 元素。