Question

我有一个带有道具的子组件，但也有一个挂载日期和小时的挂载功能。如何在重新加载父数据时更新此函数？

父组件：

 <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: ''
  }

Answer 2

我亲自将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属性时，它会向下流入子组件。

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

2 个答案: