Vue基础之mixins

目的

让组件复用配置项

配置方法

局部mixins

mixins配置文件

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

<script>
	import {mixin1，mixin2} from '../mixin'

	export default {
		name:'Student',
		data() {
			return {
				name:'张三',
				sex:'男'
			}
		},
		mixins:[mixin1，mixin2]
	}
</script>

全局mixins

对vm，和所有vc均进行mixins

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
import {mixin1，mixin2} from '../mixin'
//关闭Vue的生产提示
Vue.config.productionTip = false

Vue.mixin(mixin1)
Vue.mixin(mixin2)


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

注意事项

1. mixin不会对原属性覆盖，而是进行混合，冲突的属性以原配置属性为主。
2. mounted生命周期函数，混合的先执行，原配置后执行。