Vue之mixins理解与应用

原文地址：http://t.zoukankan.com/emilyzz-p-14202639.html

1、什么是mixins

　　vue提供的一种混合机制，能够更好的实现组件功能复用，混合对象（mixins）可以包含任意组件选项（data、created、mounted、methods、filters等），组件引入后相关选项会进行合并，相当于引入后，父组件各属性进行扩充；

2、方法覆盖

　　在引入mixins的同时，组件中重复定义，minxins中的属性方法会被覆盖

3、应用

　　mixin.js

const mixin = {
    data() {
        return {

　　　　　　　　test: 'mixins变量覆盖组件内变量',

        }
    },
    created() {
        console.log('created: from mixins');
    },
    mounted() {
        console.log('mounted: from mixins');
    }
}
export default mixin

　　组件引入mixin.js

import mixin from '@/mixins/mixin';

　export default { 　　data(){ 　　　　return { 　　　　　　test: '组件变量覆盖mixins变量' 　　　　} 　　}, 　　mixins: [mixin],　 　　created() { 　　　　console.log(this.test) 　　　　console.log('created: from 当前组件') 　　}, 　　mounted() { 　　　　console.log('mounted: from 当前组件') 　　}, 　}

　　合并后打印情况

　　

标签：Vue,console,log,mixins,理解,mixin,组件,mounted
来源： https://www.cnblogs.com/eyesfree/p/16685129.html