Vue Mixins混入介绍与使用

混入(Mixins)介绍

混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能

通俗的讲

将组件的公共逻辑或者配置提取出来进行存放

哪个组件需要用到时,直接将提取的这部分混入到组件内部即可

再通俗的讲

就是将项目中使用频繁的方法,提取出一个文件中

在哪个页面中使用的时候,再混入进来,也就是引用进来

注意的是,这里提取的是逻辑和配置,也就是js等,可不是css和html

Mixins使用

1,建立js文件

文件名随便,我建立一个mixins.js

2,mixins.js代码

export const mixins = {
 data() {
 return {
 msg: "我是乞力马扎罗",
 };
 },
 computed: {},
 created() {
 console.log("我是mixin中的created生命周期函数");
 },
 mounted() {
 console.log("我是mixin中的mounted生命周期函数");
 },
 methods: {
 getclick() {
 console.log("我是mixin中的点击事件");
 },
 },
};

3,页面局部混入

  • 当你想使用混入文件中的方法,页面中直接可进行this.方法名,调用
  • 当你想使用混入文件中的变量,页面中直接可进行this.变量名,调用
  • ata数据与组件中的data数据冲突时,组件中的data数据会覆盖mixin中数据,方法名同样如此
  • mixins: [mixin],注意,前者名字是vue提供的属性名,不能改,中括号里的名字可以进行更改,但得与import引入名一致
<script>
import mixin from "@/config/mixins.js"
	export default {
	mixins: [mixin],
	data() {
	return {
	};
	},
	onShow(){
	console.log(this.msg)//乞力马扎罗
	console.log(this.getclick())//我是mixin中的点击事件
	},
	}
</script>

好的,看一下其他人的总结

mixin中的生命周期函数会和组件的生命周期函数一起合并执行

mixin中的data数据在组件中也可以使用。

mixin中的方法在组件内部可以直接调用。

生命周期函数合并后执行顺序:先执行mixin中的,后执行组件的。

并且,一个组件中改动了mixin中的数据,另一个引用了mixin的组件的数据不受影响,不同组件中的mixin是相互独立的!

全局混入

(不建议使用,容易造成污染)

修改main.js数据,进行全局注册

import mixins from "@/config/mixins.js"
Vue.mixin(mixins);

页面中使用直接就可以this.名字进行使用,

<script>
	export default {
	data() {
	return {
	};
	},
	onShow(){
	console.log(this.msg)//乞力马扎罗
	console.log(this.getclick())//我是mixin中的点击事件
	},
	}
</script>
作者:博主花神原文地址:https://blog.csdn.net/weixin_44899940/article/details/128833343

%s 个评论

要回复文章请先登录注册