我有一个带有 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(或此类框架)的新手,我正在努力如何处理此类动态信息。
提前致谢。
最佳答案
有几种方法可以做到这一点。
如果您的父组件的 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: ''
}
关于javascript - Vue.js - 更新子组件的功能,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44929205/