vue mixin混入（一）—— 基础

我们在开发Vue组件时，其实很多功能是可以复用的，那么如何将这些功能提出，进行复用呢？Vue 已提供方法了mixin混入对象

首先引入文档的定义

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

举例说明一下

//myMixin.js   
//使用方式和Vue一样，该怎么使用，就怎么使用
export const myMixin ={
	data(){
		return{
			name :'张三',
			age  : 13
		}
	},
	methods :{
		getNameFn (){
			console.log(this.name)
		}
	}
}

//home.vue
//引入myMixin.js ,假设两个文件在同级
import {myMixin} from './myMixin.js'

export default {
	mixins:[myMixin],
	mounted (){
	//	这里是关键、我在home.vue里没有定义getNameFn方法
	//  但是我却可以使用，并且打印出 张三
		this.getNameFn();
	}
}

如何命名相同怎么办？

选项会合并 ，规则照常引入一下文档，文档定义很重要

1、当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”
比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先
2、同名钩子函数将合并为一个数组，因此都将被调用
3、混入对象的钩子将在组件自身钩子之前调用。
4、值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象
5、两个对象键名冲突时，取组件对象的键值对。

举例说明一下

//myMixin.js   
//使用方式和Vue一样，该怎么使用，就怎么使用
export const myMixin ={
	data(){
		return{
			name :'张三',
			age  : 13
		}
	},
	methods :{
		getNameFn (){
			console.log(this.name)
		},
		setNameFn (){
			this.name = '王五'
			console.log(this.name)
		}
	}
}

//home.vue
//引入myMixin.js 
import {myMixin} from './myMixin.js'

export default {
	mixins:[myMixin],
	data() {
		return {
			name:'李四'
		};
	},
	methods :{
		setNameFn (){
			this.name = '白七';
			console.log(this.name)
		}
	},
	mounted (){
		//  这里还是获取name，但是打印出来的却是 李四
		this.getNameFn();
		//这里会执行 组件内的方法，打印 白七
		this.setNameFn()
	}
}