Vue2(笔记29) - 脚手架 - mixin混入

mixin混入

所谓混入，就是几个组件共享一个配置，可局部混入，也可全局混入；

第一步：先建个混入文件，配置写进去，再 export 出来；

新建 mixin.js 文件： 

export const commonConfig = {
methods:{
showName(){
alert(this.name);
        }
    },
data(){
return{
year:2022
        }
    }
}

export const commonMount ={
mounted(){
console.log('加载完成！');
    }
}

提示1：取个共用的配置名 commonConfig 和 commonMount; 

提示2：写个共用的方法， showName();

提示3：写个共用的属性，year；

提示4：共用的配置，还可以是钩子函数等其他配置都行；

可以申明多个配置项，但引入的时候可以全部选择，也可以只选一个；

第二步：再组件中引入文件，通过配置项 mixins:[xxx] 应用；

要在 school.vue 和 student.vue 中应用，就分别修改这两个组件：

修改 school.vue 组件：

<template>
<div class="demo">
<h2 @click="showName">学校名称：{{ name }}</h2>
<h2>学校地址：{{ address }}</h2>
<h2>学年：{{year}}</h2>
</div>
</template>

<script>
import {commonConfig} from '../mixin'  // 引入混入文件
export default {
name: "schoolInfo",
data() {
return {
name:"51cto",
address:"北京"
        };
    },
mixins:[commonConfig]        // 应用混入的配置项
};
</script>

提示1：school.vue 使用的是引入来的共用属性 year；

提示2：引入混入文件中的共用配置，commonConfig 项；

import {xxx} from '../xxx'

提示3：再应用混入的配置项；

mixins:[xxx]

提示4：混入配置项跟 props 配置项一样，都要放在数组里面；

提示5：还有一个混入配置名 commonMount，在这个组件中没有用；

要在 student.vue 文件中应用混入，也要相应修改一下：

<template>
<div class="demo">
<h2 @click="showName">学员名称：{{name}}</h2>
<h2>学员年龄：{{age}}</h2>
<h2>学年：{{year}}</h2>
</div>
</template>

<script>
import {commonConfig,commonMount} from '../mixin'
export default{
name:'studentInfo',
data(){
return{
name:'Jack',
age:18
            }
        },
mixins:[commonConfig,commonMount]
    }
</script>

提示1：引入了两个混入配置声明；

看下效果：

提示1：引入了共用的属性 year ，都显示了，DevTools 中也能查看；

提示2：引入了共用的方法 showName()，点击名字后也都能显示；

提示3：student.vue 组件中，还引入了 mounted() 钩子函数，也执行了；

全局混入

在每个组件中都引入混入的写法是局部混入；

写在 main.js 文件中的写法是全局混入，就不需要在每个组件中分别混入了；

修改 main.js

import Vue from 'vue'
import App from './App.vue'
import { commonConfig,commonMount } from './mixin'

Vue.config.productionTip = false
Vue.mixin(commonConfig)
Vue.mixin(commonMount)

new Vue({
render: h => h(App),
}).$mount('#app')

提示1：import 两个混入配置声明；

提示2：分别应用​​ Vue.mixin() ​​两个混入，使用几个就引入几次；

提示1：分别点击学校名和学员名时，都能正常输出；

提示2：显示了4次“加载完成”，意思是说在每个组件都执行了一次；

在 Vue DevTools 中看到，共有4个组件，全部应用了 year 属性和 mounted() 钩子函数；

优点：只写一次都能用了；

不足：全局混入了，哪哪都有了；

共享配置的优先级

1）组件里的配置优先，其次是混入里的配置，例如：数据属性和方法等；

如果 school.vue 组件中，也使用了 year 属性，并有值，以当前组件为优先；

export default {
name: "schoolInfo",
data() {
return {
name:"51cto",
address:"北京",
year:2023     // 优先
        };
    },    
};

2）针对钩子函数，不论优先级，都会执行，而且混入里的钩子函数先执行；

给 school.vue 和 student.vue 组件也分别加上 mounted() 钩子函数；

school.vue 中添加 mounted()

mounted(){
console.log("school加载了");
    }

student.vue 中也添加 mounted() 

mounted() {
console.log("student加载了");
    },

看下效果：

除了全局的 mounted() 4次钩子函数都执行了外，两个组件的也分别执行了；

注意：全局的钩子函数先执行，本组件中的钩子后执行；

加载顺序：

子组件先执行（黄框），app 组件其次（蓝框），root 最后（绿框）

---

【mixin(混入)】总结

功能：可能把多个组件共用的配置提取成一个混入对象；

使用方式：

第一步定义混入，例如：

{
  data(){...},
  methods:{...},
  ...
}

第二步：引入混入配置项，例如：

import {xxx,xxx} from '../xxx'

 第三步：应用混入，例如：

1、全局混入： Vue.mixin(xxx)

2、局部混入：mixins:['xxx','xxx','xxx']