Vue Mixins混入介绍与使用

时间:2023-02-03 博主花神人气:0

混入(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>

加载全部内容