Vue中的MixIn（混合）

Vue中的MixIn介绍

MinIn中文通常叫做混合或者混入
功能： 可以把多个组件公用的配置提取成一个混入对象，实现功能复用

MixIn使用

1. 定义混合

// 新建混合的js文件，代码如下：
export const mix = {
    data() {
        return {
            age: 3
        }
    },
    mounted() {
        console.log('加载了');
    }
}

2. 引入混合

// 引入混合
import {mix} from './js/MixIn'

// 两种引入方式，全局引入和局部引入，类似filter

// 1. 全局引入，使用多个混合时，使用多个Vue.mixin()
// 在App.vue中使用全局引入后，其他组件都可以使用该混合
Vue.mixin(mix)

// 局部引入

export default {
    mixins: [mix]
}

3. 使用混合

// 与在data中使用数据相同 ，可以直接使用
<p>age : {{age}} </p>