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

回到Home.vue this.sections填充从fpSections.vue发出的数据，并作为道具传回给它。

当我使用Vue devtools进行检查时，道具会正确传递，但数据不会更新。

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

Answer 1

:active="activeItem"

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

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

或

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

Answer 2

您可以使用.sync修饰符然后需要发出更新，请参阅我的示例，了解它的工作方式：

Vue.component('button-counter', {
  template: '<button v-on:click="counter += 1">{{ counter }}</button>',
  props: ['counter'],
  watch: {
    counter: function(){
       this.$emit('update:counter',this.counter)
    }
  },
})

new Vue({
  el: '#counter-sync-example',
  data: {
    foo: 0,
    bar: 0
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<div id="counter-sync-example">
  <p>foo {{ foo }} <button-counter :counter="foo"></button-counter> (no sync)</p>
  <p>bar {{ bar }} <button-counter :counter.sync="bar"></button-counter> (.sync)</p>
</div>

Vue组件数据不从道具更新

2 个答案: