前言
官方解释:
混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含
任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。
简单理解:
本质是函数封装,把多个页面重复用到的data数据、created()、methods:{}、
里方法封装在一个js文件里,每个页面依次导入,减轻代码冗余
注意:导入之后,data数据会合并,methods数据会合并到一起,相当于扩展了原组件的对象与方法
特点:与vuex区别
vuex:用来做状态管理的,里面定义的变量在每个组件中均可以使用和修改,在任一组件中修改此变量的值之后,其他组件中此变量的值也会随之修改。
Mixins:可以定义共用的变量,在每个组件中使用,引入组件中之后,各个变量是相互独立的,值的修改在组件中不会相互影响。
特点:与组件的区别
组件:在父组件中引入组件,相当于在父组件中给出一片独立的空间供子组件使用,然后
根据props来传值,但本质上两者是相对独立的。
Mixins:则是在引入组件之后与组件中的对象和方法进行合并,相当于扩展了父组件的对
象与方法,可以理解为形成了一个新的组件。
示例
-
通常位置
在vue项目下src下assets中新建mixins文件夹
-
在mixins下新建new.js
export const new1= { data(){ return{ aa:'aaa', } }, created(){ this.stateClick(); }, methods: { stateClick() { console.log("测试") } }
-
组件中使用
<template>
<div id="contation">
</div>
</template>
<script>
import { new1} from '@assets/mixins/new.js';
export default {
name: '',
mixins: [new1],
data(){
return{
bb:'bbb',
}
},
};
</script>
等价于
<template>
<div id="contation">
</div>
</template>
<script>
export default {
name: '',
data(){
return{
aa:'aaa',
bb:'bbb'
}
},
created(){
this.stateClick();
},
methods: {
stateClick() {
console.log("测试")
}
};
</script>
特点
-
方法和参数在各组件中不共享
new.js如下
export const new= {
data(){
return{
num:1,
}
},
created(){
this.stateClick();
},
methods: {
}
}
组件1中参数进行+1的操作 显示值为2
<template>
<div id="contation">
组件1------{{num}} // 值为2
</div>
</template>
<script>
import { new1 } from '@assets/mixins/new.js';
export default {
name: '',
mixins: [new1],
created(){
this.num++;
}
};
</script>
组件2中参数不进行操作,值还是1,不受组件1的影响
<template>
<div id="contation">
组件1------{{num}} // 值为1
</div>
</template>
<script>
import { new1 } from '@assets/mixins/new.js';
export default {
name: '',
mixins: [new1],
};
</script>
- 值为对象的选项,如methods,components等,选项会被合并,键(属性
名、方法名)冲突的:以当前组件为准(当前组件覆盖混入的mixins对象) - 值为函数的选项,如created,mounted等,就会被合并调用,混合对象里的钩子函数在组件里的钩子函数之前调用