1、什么是mixins(混入):
mixins是vue提供的一种混入机制(可以直接在Vue里面使用,不用额外安装什么依赖),能够更好地实现组件功能复用,混入对象(mixins)可以包含任意组件选项(data、created、mounted、methods、computed、filter等),组件引入mixins后,相关选项会进行合并,相当于引入后,父组件各属性和方法进行了扩充。
2、关键点:
① 组件在引入mixins的同时,组件中重复定义,minxins中的属性方法会被覆盖(即组件和封装的mixin文件里面如果定义相同属性,以父组件为准)
② 在封装的mixins文件里面可以直接调用父组件的属性和方法
3、代码实践:
① 组件代码
<template>
<div id="">
<div>组件测试页面</div>
<br>
<div>
{{userName}}:{{age}}
</div>
</div>
</template>
<script>
import textMixin from './js/text_mixin.js'//导入混合机制文件
export default{
mixins:[textMixin],//声明 混入
data(){
return{
age: 18,
userName:"我是组件属性"
}
},
mounted() {
this.changeName();
},
methods:{
//年龄转换计算
changeAge(){
this.age *= 2;//翻倍
},
}
}
</script>
<style>
</style>
②、封装的mixin代码
export default {
data(){
return{
userName: "我是mixin里属性"
}
},
methods:{
//名称加后缀
changeName(){
this.userName += '的';//userName会被父组件的覆盖
this.changeAge();//调用父组件定义的方法
}
},
};
总结:比如有个方法功能有多个页面要引用到,这个时候使用mixins混入,可以很好地解决功能拓展的方便以及复用性。