Vue.js - 更新子組件的功能

我有一個子組件與一個道具，但也有一個掛載的函數初始日期和小時。當父數據重新加載時如何更新此函數？Vue.js - 更新子組件的功能

父組件：

<template> 
     <div> 
     <ul> 
      <li v-for="item in occurrences"> 
      {{ item.title }} {{ item.completed }}</small> 
      </li> 
     </ul> 
     <sourceupd class="source" v-bind:source='source'></sourceupd> 
     </div> 
    </template> 

    <script> 
     import axios from 'axios' 
     import sourceupd from './SourceAndUpdated' 

     export default { 

     name: 'Occurrences', 

     components: { 
      sourceupd 
     }, 

     data: function() { 
      return { 
      occurrences: [], 
      source: 'ANPC' 
      } 
     }, 

     mounted: function() { 
      var _self = this 

      function callAPI() { 
      // call api code 
      } 

      callAPI() 

      setInterval(() => { 
      callAPI() 
      }, 1024 * 3) 
     } 
     } 
    </script>

子組件：

<template lang="html"> 
    <small class="source-ref">Fonte: {{ source }} | Actualização:{{ updated.hour }}:{{ updated.minutes }}</small> 
</template> 

<script> 
import moment from 'moment' 

export default { 
    data: function() { 
    return { 
     updated: { 
     hour: '', 
     minutes: '' 
     } 
    } 
    }, 

    props: ['source'], 

    mounted: function() { 
    moment.locale('pt') 

    this.updated.hour = moment().format('HH') 
    this.updated.minutes = moment().format('mm') 
    this.updated.seconds = moment().format('ss') 
    } 
} 
</script>

當callAPI（）被重新加載，我想，以及更新時間。我是Vue.js（或這種框架）的新手，我正在努力處理這種動態信息。

在此先感謝。

來源

2017-07-05 João Saro

也許使用['updated']（https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram）而不是'mounted' –

有幾種方法可以做到這一點。

如果父組件的source屬性被callAPI更新，那麼這將如同將代碼移動到updated處理程序一樣簡單。

export default { 
    data: function() { 
    return { 
     updated: { 
     hour: '', 
     minutes: '' 
     } 
    } 
    }, 

    props: ['source'], 
    methods: { 
    update(){ 
     moment.locale('pt') 

     this.updated.hour = moment().format('HH') 
     this.updated.minutes = moment().format('mm') 
     this.updated.seconds = moment().format('ss') 

    }  
    }, 
    updated: function() { 
    this.update() 
    }, 
    mounted: function(){ 
    this.update() 
    } 
}

因爲它是不明確的，你要更新的sourceupd的任何屬性，另一種方法是隻需調用使用ref方法。

在父組件模板：

<sourceupd ref="sourceupd" class="source" v-bind:source='source'></sourceupd>

在你安裝的處理程序：

setInterval(() => { 
    callAPI() 
    this.$refs.sourceupd.update() 
}, 1024 * 3)

，並更改sourceupd：

export default { 
    data: function() { 
    return { 
     updated: { 
     hour: '', 
     minutes: '' 
     } 
    } 
    }, 

    props: ['source'], 

    methods: { 
    update(){ 
     moment.locale('pt') 

     this.updated.hour = moment().format('HH') 
     this.updated.minutes = moment().format('mm') 
     this.updated.seconds = moment().format('ss') 

    }  
    }, 

    mounted: function() { 
    this.update() 
    } 
}

我還要指出的是，你應該添加seconds到updated您的數據的屬性，otherwis它不會被動。

updated: { 
    hour: '', 
    minutes: '', 
    seconds: '' 
    }

來源

2017-07-05 15:10:17 Bert

感謝它的運作，只需要將'ref'改爲' refs'：this。$ ref.sourceupd.update（）=> this。$ refs.sourceupd.update（） –

@JoãoSaroYup，錯字，謝謝:) – Bert

我親自將updated作爲財產傳遞給孩子。這樣，只要父母更新，孩子也會這樣。

我也不會把它作爲一個對象，而是一個時間戳，所以你可以更容易地做任何你想做的事情。

此外，我會使用過濾器格式化小時分鐘和秒。

我Child組件看起來像：

const Child = { 
    props: { 
    updated: Number, 
    }, 

    filters: { 
    format (timestamp, format) { 
     return moment(timestamp).format(format || 'dddd, MMMM Do YYYY, h:mm:ss a') 
    }, 
    }, 

    template: ` 
    <div class="child">{{ updated | format('ss') }}</div> 
    `, 
}

然後，當你更新父的updated屬性，它會向下流入子組件。

來源

2017-07-05 15:24:45

我認爲這是一個很好的方法。 – Bert

Vue.js - 更新子組件的功能

回答

相關問題