混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
个人理解: 就是有很多组件需要同一个方法。同一个变量。做同样的事。这个时候就用到这个混入的功能。混入之后变量组件内可用,方法也可用,写在周期函数的代码也会执行。
写一个mess.js文件
export default {
data() {
return {
message: '我是混入中的变量'
};
},
mounted() {
console.log(this.message)
}
};
组件中调用
<template>
<div class="tab_home">
</div>
</template>
<script>
import mess from '@/mixin/mess'; // 直接引入
export default {
mixins: [mess], // 注册
components: {
},
data() {
return {
shopInfos: [],
isLoading: false
};
},
created() {
console.log(this.message); // 这里就可以使用混入对象里的变量
},
computed: {
},
methods: {
}
};
</script>
<style lang="scss" scoped>
</style>
组件内使用后,混入对象内的周期函数和方法变量都会和组件合并,而且是优先执行,一旦出现冲突变量冲突方法以组件为主。
一般混入都是在单组件内应用比较合适
混入也可以进行全局注册。使用时格外小心!一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。(不推荐全局引入)
实际用途包括
keep-alive组件记录滚动条位置,回来时跳转到指定滚动位置。
keep-alive组件销毁函数
提示框等等
思路就是当你觉得几个组件内都调用了同一个函数同一个变量,执行同一个操作。此时要是使用这个。
要和vuex区分开,vuex管理数据统一,混入是变量统一,但是每个变量在组件内是不同的。
vuex 相当于 a 的值 一改都改一变都变
混入相当于,帮你提前先定义一个变量。或者说定义个方法,执行段代码。
结束