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']