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

【问题标题】：Vue.js mixin does not work correctly in componentVue.js mixin 在组件中无法正常工作
【发布时间】：2016-12-22 08:58:29
【问题描述】：

这是我在 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 开发工具中看到的那样，所有数据也都存在。但它并没有在我设置的区间内刷新数据。

希望有人遇到类似问题并可以帮助我解决此问题。

【问题讨论】：

你能不能先写：Vue.mixin(myMixin);，然后定义组件：Vue.component('comp', re...。
这个效果是一样的。第一次初始化工作正常，但间隔不更新数据。
IMOP 我认为您应该使用时钟组件而不是 mixin，这对我来说更有意义。全局 mixin 根本不是什么好东西，只有在每个 vue 实例中确实需要特定功能时才应该使用它。
是的，这就是重点。我需要在超过 4 个组件中使用此功能，因此我尝试通过不在每个组件中重复所有内容来使其更具可读性和可重用性。
您不需要重复任何事情，只需将<clock> 创建为具有Vue.component() 的全局组件并在其他组件中使用它即可。我也尝试了您的代码，mixin 中的间隔可能存在问题，但还不知道为什么。 :)

标签： javascript vue.js mixins vue-component

【解决方案1】：

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

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

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

谢谢你们！

【讨论】：