javascript - Vue.js - 更新子组件的功能

Question

我有一个带有 prop 的子组件，但也有一个已安装的函数来初始化日期和时间。当父级数据重新加载时如何更新此函数？

父组件:

 <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(或此类框架)的新手，我正在努力如何处理此类动态信息。

提前致谢。

Answer 1

有几种方法可以做到这一点。

如果您的父组件的 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 属性中，否则它将不会响应。

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