Javascript Vue.js mixin在组件中无法正常工作
这是我在Vue.js中的混音:Javascript Vue.js mixin在组件中无法正常工作,javascript,vue.js,mixins,vue-component,Javascript,Vue.js,Mixins,Vue Component,这是我在Vue.js中的混音: var myMixin = { data () { clockInt: '', clock: '', currentTime: new Date() }, mounted () { this.intervalSetup(); }, methods: { intervalSetup () { var _this =
var myMixin = {
data () {
clockInt: '',
clock: '',
currentTime: new Date()
},
mounted () {
this.intervalSetup();
},
methods: {
intervalSetup () {
var _this = this;
// init
this.getTime();
// start interval every 60s
this.clockInt = setInterval(
_this.getTime(), 60000
);
},
getTime () {
var now = this.currentTime,
h = now.getHours(),
m = now.getMinutes();
this.clock = h + ':' + m;
}
}
};
这将显示一个简单的数字手表,每60秒设置一次时间
然后,我将此mixin注册到Vue,需要我的组件并启动Vue的新实例:
Vue.component('comp', require('./components/MyComponent.vue'));
Vue.mixin(myMixin);
const app = new Vue({
el: '#app'
});
我的组件如下所示:
<template>
<div>{{ clock }}</div>
</template>
<script>
export default {
data () {
return {
someData: []
}
},
mounted () {
// call methods
},
methods: {
// some methods
}
};
</script>
{{时钟}}
导出默认值{
数据(){
返回{
someData:[]
}
},
挂载(){
//调用方法
},
方法:{
//一些方法
}
};
mixin方法的第一个init工作正常,正如我在Vue开发工具中看到的,所有数据也都存在。但它不会在我设置的时间间隔内刷新数据
希望有人也有类似的问题,可以帮我解决。伙计们。这两种解决方案的工作原理与预期完全相同——作为单个组件和混合。很高兴知道 问题是
currentTime:new Date()
。日期时间在数据对象中仅声明了一次。所以时间间隔总是用这个时间戳
我刚刚删除了它并更改了var now=new Date()代码>在我的mixin方法中
谢谢你们 你能试着先写:Vue.mixin(myMixin)代码>而不是定义组件:Vue.component('comp',re…
。这也有同样的效果。第一次初始化工作正常,但间隔不会更新数据。IMOP我认为您应该使用一个时钟组件,而不是mixin,这对我来说更有意义。全局mixin根本不是一件好事,只有在您确实需要每个时钟中的特定功能时,才应该使用它单个vue实例。是的,这就是重点。我需要在4个以上的组件中使用此功能,因此我尝试通过不重复每个组件中的所有内容来提高可读性和可重用性。您不需要重复任何内容,只需使用vue.component()将
创建为全局组件即可
并在其他组件中使用它。我也尝试了您的代码,但混音器内的间隔可能有问题,尚未找到原因。:)请将其标记为解决方案!