Vuejs - 多个组件使用相同的 mixin（只有最后一个被触发）答案

【问题标题】：Vuejs - Multiple components use same mixin (only last one gets fired)Vuejs - 多个组件使用相同的 mixin（只有最后一个被触发）
【发布时间】：2015-12-10 12:10:17
【问题描述】：

我有大约四个组件使用我创建的同一个 mixin。为了获得this.$el（正确的）的尺寸，我必须实现window.onload = function() mixin。我的 mixin 看起来像这样：

module.exports = {
    methods: {
        onPageload: function( callback ) {
            window.onload = function() {
                callback();
            }
        }
    }
};

非常简单。但是，不止一个组件使用它。我正在制作幻灯片。我的 Slides 组件、我的 Slide 组件、我的 Thumb 组件和我的整个 Slider 组件都使用它。但是只有compile 的最后一个会触发它。

var pageLoad = require('../../mixins/Pageload');

module.exports = {
    template: require('./templates/thumbs.html'),

    replace: true,

    data: function() {
        return {
            style: {
                width: 800
            },
            count: 2
        }
    },

    computed: {
        styles: function() {
            return {
                width: this.style.width + 'px'
            }
        }
    },

    mixins: [pageLoad],

    props: ['count'],

    attached: function() {
        this.onPageload( this.setDimensions );
    },

    methods: {
        // Set dimensions for the first time
        setDimensions: function() {
            console.log('setting thumb');
            this.style.width = this.$parent.slideWidth;
        }
    }
};

我的其他“父”组件做同样的事情来设置它们的尺寸。这是整个事情中最内在的孩子..它是唯一一个触发的。如果我从这里删除它，下一个孩子是唯一会开火的孩子。它们以某种方式相互覆盖。我的 vue 实例在这里：

new Vue({
    el: '#slideshow',

    components: {
        'sliderarrows': require('../../components/slider/SliderArrows'),
        'sliderthumb': require('../../components/slider/SliderThumb'),
        'sliderslide': require('../../components/slider/SliderSlide'),
        'slides': require('../../components/slider/SliderSlides'),
        'slider': require('../../components/slider/Slider'),
        'thumbnails': require('../../components/slider/SliderThumbs')
    }
});

所以缩略图组件是唯一触发 mixin 方法的组件。我觉得这与 require() 的整个编译有关，但我不确定，因为我对 Node.js 模块格式不太熟悉。

感谢您提供有关如何使其工作的任何帮助！

【问题讨论】：

标签： node.js mixins webpack vue.js

【解决方案1】：

我不得不把我的 mixin 改成这样：

module.exports = {
    methods: {
        onPageload: function( callback ) {
            window.onload = callback();
        }
    }
};

window.onload 打开了一个新函数。

【讨论】：