小编kma*_*aar的帖子

我正在构建一个带有滚动导航的 SPA，其中填充了基于部分组件的菜单项。

在我的 Home.vue 中，我正在导入 scrollNav 和这样的部分：

<template>
    <div class="front-page">
        <scroll-nav v-if="scrollNavShown" @select="changeSection" :active-section="activeItem" :items="sections"></scroll-nav>
        <fp-sections @loaded="buildNav" :active="activeItem"></fp-sections>
    </div>
</template>

<script>
    import scrollNav from '.././components/scrollNav.vue'
    import fpSections from './fpSections.vue'

    export default {
        data() {
            return {
                scrollNavShown: true,
                activeItem: 'sectionOne',
                scrollPosition: 0,
                sections: []
            }
        },
        methods: {
            buildNav(sections) {
                this.sections = sections;
                console.log(this.sections)
            },
            changeSection(e) {
                this.activeItem = e
            },
        },
        components: {
            scrollNav,
            fpSections
        }
    }    
</script>

this.sections 最初是空的，因为我用 fpSections.vue 中各个部分的数据填充这个数组：

<template>
    <div class="fp-sections">
        <keep-alive>
            <transition
                @enter="enter"
                @leave="leave" …