Vue 组件数据未从道具更新

Question

我正在构建一个带有滚动导航的 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"
                :css="false"    
            >
                <component :is="activeSection"></component>
            </transition>
        </keep-alive>
    </div>
</template>

<script>
    import sectionOne from './sections/sectionOne.vue'
    import sectionTwo from './sections/sectionTwo.vue'
    import sectionThree from './sections/sectionThree.vue'

    export default {
        components: {
            sectionOne,
            sectionTwo,
            sectionThree
        },
        props: {
            active: String
        },
        data() {
            return {
                activeSection: this.active,
                sections: []
            }
        },
        mounted() {
            this.buildNav();
        },
        methods: {
            buildNav() {
                let _components = this.$options.components;
                for(let prop in _components) {
                    if(!_components[prop].hasOwnProperty('data')) continue;
                    this.sections.push({
                        title: _components[prop].data().title,
                        name: _components[prop].data().name
                    })
                }
                this.$emit('loaded', this.sections)
            },
            enter(el) {
                twm.to(el, .2, {
                    autoAlpha : 1
                })
            },
            leave(el, done) {
                twm.to(el, .2, {
                    autoAlpha : 0
                })
            }
        }
    }
</script>

该buildNav方法循环遍历各个组件的数据并将其推送到作用域this.sections数组，然后将其发送回 Home.vue

Back in Home.vuethis.sections填充了从 fpSections.vue 发出的数据，并作为 prop 传回给它。

当我使用 Vue devtools 检查时，props 正确传递，但数据没有更新。

我在这里缺少什么？数据应该在父级中更新时对道具做出反应吗？

Answer 1

:active="activeItem"

这称为“动态道具”而不是动态数据。您设置一次“onInit”。对于反应性，你可以做

computed:{
   activeSection(){ return this.active;}
}

或者

watch: {
    active(){
    //do something
    }
}