mixin

mixin是一个配置项，类型为Array<Object>，数组里每一个对象都是一个混入（mixin）

每一个混入里可以包含若干个配置项，将混入使用在组件中，会与组件中的配置项合并

1.局部混入

局部混入属于单个组件，只在组件中使用

<template>
</template>

<script>
    const mixin={
        data(){
            return{
                pageNum:1,
                pageSize:10
            }
        },
        create(){},
        mounted(){},
        methods(){},
        // ...
    }
    
    export default{
        data(){
            return{}
        },
        mixin:[mixin]
    }
</script>

一般混入都是以单文件定义

myMixin.js

const mixin={
    data(){
        return{
            pageNum:1,
            pageSize:10
        }
    },
    create(){},
    mounted(){},
    methods(){},
    // ...
} 
export  default mixin

组件

<template>
</template>

<script>
    import myMixin from './myMixin'
    export default{
        data(){
            return{}
        },
        mixin:[mixmyMixinin]
    }
</script>

TIP

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

2.同名生命周期钩子将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用

2.全局混入

myMixin.js

const mixin={
    data(){
        return{
            pageNum:1,
            pageSize:10
        }
    },
    create(){},
    mounted(){},
    methods(){},
    // ...
} 
export  default mixin

main.js

import Vue from 'vue'
import myMixin from './myMixin'

Vue.mixin(myMixin)