mixin混入

87 阅读 0 评论 58 点赞

我是靠谱客的博主平淡裙子，这篇文章主要介绍mixin混入，现在分享给大家，希望可以做个参考。

一，前言

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

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
let mixin ={
	data:function(){
		return {
			msg:'123'
		}
	},
	created(){
		console.log('vue created')
	}
}

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

复制代码

1
2
3
4
new Vue({
	mixins:[mixin,mixin1,...]
})

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

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

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

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

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
Vue.mixin({
	data:function(){
		return {
			msg:'123'
		}
	},
	created(){
		console.log('vue created')
	}
})

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

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

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。