Javascript Vue.js-更新子组件'；s函数_Javascript_Vue.js_Vuejs2

Javascript Vue.js-更新子组件'；s函数

javascript vue.js vuejs2

Javascript Vue.js-更新子组件'；s函数,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,我有一个带有道具的子组件，但也有一个挂载函数来初始化日期和时间。重新加载来自父级的数据时如何更新此函数父组件： <template> <div> <ul> <li v-for="item in occurrences"> {{ item.title }} {{ item.completed }}</small> </li>

我有一个带有道具的子组件，但也有一个挂载函数来初始化日期和时间。重新加载来自父级的数据时如何更新此函数

父组件：

 <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>




{{item.title}{{item.completed}}


从“axios”导入axios
从“/SourceAndUpdated”导入sourceupd
导出默认值{
名称：“事件”，
组成部分：{
源UPD
},
数据：函数（）{
返回{
发生次数：[]，
资料来源：“ANPC”
}
},
挂载：函数（）{
var_self=这个
函数callAPI（）{
//调用api代码
}
callAPI（）
设置间隔（（）=>{
callAPI（）
}, 1024 * 3)
}
}

子组件：

<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>


Fonte:{{source}}|Actualizaão:{{updated.hour}}:{{{updated.minutes}}
从“时刻”导入时刻
导出默认值{
数据：函数（）{
返回{
更新：{
小时：''，
会议记录：“”
}
}
},
道具：['source']，
挂载：函数（）{
moment.locale（'pt'）
this.updated.hour=moment（）.格式（'HH'）
this.updated.minutes=moment（）.格式（'mm'）
this.updated.seconds=moment（）.format（'ss'））
}
}

当重新加载callAPI（）时，我也想更新时间。我是Vue.js（或这种框架）的新手，我正在努力处理这种动态信息

提前感谢。

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

如果父组件的

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>

并更改

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