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

回到Home.vue this.sections中填充了從fpSections.vue發出的數據並作爲道具傳回給它。

當我檢查Vue devtools時，道具正確傳遞，但數據不會更新。

我在這裏錯過了什麼？數據應該在父權利更新時對道具做出反應？

Answer 1

:active="activeItem" 

這是calld「dynamic prop」不是動態數據。你一次設置「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>