Question

这是我在Vue.js中的mixin：

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>

mixin方法的第一个init工作正常，正如我在Vue dev-tool中看到的那样，所有数据也都存在。但它不会刷新我设置的间隔中的数据。

希望有人有类似的问题，可以帮助我。

Answer 1

好吧，伙计们。两种解决方案都完全按预期工作 - 作为单个组件和混合。很高兴知道。

问题是currentTime: new Date()。日期时间仅在数据对象中声明一次。所以间隔总是占用这个时间戳。

我刚删除了这个并在我的mixin方法中更改了var now = new Date();。

谢谢你们！

Vue.js mixin在组件中无法正常工作

1 个答案: