尝试使用“:is="component"”渲染组件时如何修复黑屏

Question

在 Android 的 NativeScript-Vue 中编写，我正在尝试根据按钮点击呈现组件。我正在使用此 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>

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

我运行使用 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: { 
    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 方法更改了 FrameHub.vue 中 "main-frame" 元素中渲染的组件。这样 GlobalDrawer 总是在最上面，而用户可以在页面之间自由切换。

我希望这对遇到同样问题的人有所帮助。我也确信这个解决方案可以改进。虽然我目前不在做这方面的工作，但请告诉我有关改进的信息。

Answer 1

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

GlobalDrawer的frame槽包含一个Frame元素（here) to control navigation inside the drawer as stated here，这意味着槽只接受Page元素。

尝试使用“:is="component"”渲染组件时如何修复黑屏

How to fix blank screen when trying to render components with ' :is="component" '

javascript

vue.js

vue-component

nativescript-vue