Vue mixin混入

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 = false

Vue.mixin(fuyong)
Vue.mixin(fuyong2)

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