Question

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

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

很简单。但是，多个组件使用它。我正在制作幻灯片。我的幻灯片组件使用它，我的幻灯片组件，我的拇指组件和我的整体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模块格式。

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

Answer 1

我不得不将我的mixin更改为：

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

这是window.onload打开一个新功能的东西。

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

1 个答案: