mixin混入

一，前言

1.mixin是vue2 Option Api的一个选项，是组件复用相同逻辑的一种方式。

二，mixin介绍

1.mixin是一个对象，包含所有vue2的Option Api，即混入对象可以包含任意组件选项

let mixin ={
	data:function(){
		return {
			msg:'123'
		}
	},
	created(){
		console.log('vue created')
	}
}

2.mixin选项接受一个数组，数组可以包含多个mixin

new Vue({
	mixins:[mixin,mixin1,...]
})

三，mixin选项同名合并策略

1.组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

（1）数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先

（2）同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

（3）值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对

四，全局混入

1.我们可以使用Vue.mixin()全局注册mixin，一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。

Vue.mixin({
	data:function(){
		return {
			msg:'123'
		}
	},
	created(){
		console.log('vue created')
	}
})

2.谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)

最后

以上就是平淡裙子最近收集整理的关于mixin混入的全部内容，更多相关mixin混入内容请搜索靠谱客的其他文章。