Vue mixin混入

mixin(混入)
功能：可以将多个组件共用的配置提取成一个混入对象
比如有两个组件都有相同的方法，我们就可以将这个方法提取成一个混入对象，两个组件通过引入就可以使用此方法
使用方式：

局部使用

在src下创建mixin.js

export const fuyong = {methods:{showName(){alert(this.name);}}
} 

在组件中使用

<script>
import { fuyong } from  '../mixin'export default{name:'School',data(){return{name:'adc'}},mixins:[fuyong]}
</script>

注意：

当组件中data和mixin中有相同数据

export const fuyong = {methods:{showName(){alert(this.name);}},mounted(){console.log('你好啊！！！');   }
} export const fuyong2 = {data(){return{x:100,y:200}}
}

在组件中使用

<script>
import { fuyong,fuyong2 } from  '../mixin'export default{name:'School',data(){return{name:'adc',x:666                  //组件有的数据，依然为组件的数据}},mixins:[fuyong,fuyong2],mounted(){console.log('你好啊！！！');//生命钩子混入和组件都会使用//先使用混入中的生命钩子，再使用组件中的生命钩子}}
</script>

全局使用

export const fuyong = {methods:{showName(){alert(this.name);}}
} export const fuyong2 = {data(){return{x:100,y:200}}
}

在main.js中

import Vue from 'vue'
import App from './App.vue'
import {fuyong,fuyong2} from './mixin'
Vue.config.productionTip = falseVue.mixin(fuyong)
Vue.mixin(fuyong2)new Vue({el:'#app',render:h=>h(App)
})