mixins

混入(mixin) 提供了一种非常灵活的方式，来分发Vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被 "混合" 进入该组件本身的选项

例子

<template>
    <!-- 子组件A -->
    <div class="views__home__sub-model-a"></div>
</template>


<script>
import mixin from './mixin.js';

export default {
    mixins: [mixin],
    mounted() {
        console.log('sub-model-a', 'mounted');
    }
};
</script>

 

<template>
    <!-- 子组件B -->
    <div class="views__home__sub-model-b"></div>
</template>


<script>
import mixin from './mixin.js';

export default {
    mixins: [mixin],
    mounted() {
        console.log('sub-model-b', 'mounted');
    }
};
</script>

 

// mixin.js
export default {
    mounted() {
        console.log('mixin', 'mounted');
    }
};

 

打印结果

 

 

 

可以看见生命周期钩子一般都是先执行mixin里面的方法，然后才到组件的方法

那么问题来了，万一 mixin 和组件的选项冲突了怎么办呢？

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行 “合并” ，发生冲突时以组件数据优先。

 

例子

<template>
    <!-- 子组件A -->
    <div class="views__home__sub-model-a"></div>
</template>


<script>
import mixin from './mixin.js';

export default {
    mixins: [mixin],
    data() {
        return {
            student: {
                age: 20
            }
        };
    },
    mounted() {
        console.log('sub-model-a', this.student);
    }
};
</script>

 

// mixin.js
export default {
    data() {
        return {
            student: {
                name: 'xiaoming',
                age: 10
            }
        };
    },
    mounted() {
        console.log('mixin', this.student);
    }
};

 

打印结果

 

可以看出来 student对象进行了合并，age时冲突的，并且以组件的为准。