我们在开发Vue组件时,其实很多功能是可以复用的,那么如何将这些功能提出,进行复用呢?Vue 已提供方法了mixin混入对象
首先引入文档的定义
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。
举例说明一下
//myMixin.js
//使用方式和Vue一样,该怎么使用,就怎么使用
export const myMixin ={
data(){
return{
name :'张三',
age : 13
}
},
methods :{
getNameFn (){
console.log(this.name)
}
}
}
//home.vue
//引入myMixin.js ,假设两个文件在同级
import {myMixin} from './myMixin.js'
export default {
mixins:[myMixin],
mounted (){
// 这里是关键、我在home.vue里没有定义getNameFn方法
// 但是我却可以使用,并且打印出 张三
this.getNameFn();
}
}
如何命名相同怎么办?
选项会合并 ,规则照常引入一下文档,文档定义很重要
1、当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”
比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先
2、同名钩子函数将合并为一个数组,因此都将被调用
3、混入对象的钩子将在组件自身钩子之前调用。
4、值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象
5、两个对象键名冲突时,取组件对象的键值对。
举例说明一下
//myMixin.js
//使用方式和Vue一样,该怎么使用,就怎么使用
export const myMixin ={
data(){
return{
name :'张三',
age : 13
}
},
methods :{
getNameFn (){
console.log(this.name)
},
setNameFn (){
this.name = '王五'
console.log(this.name)
}
}
}
//home.vue
//引入myMixin.js
import {myMixin} from './myMixin.js'
export default {
mixins:[myMixin],
data() {
return {
name:'李四'
};
},
methods :{
setNameFn (){
this.name = '白七';
console.log(this.name)
}
},
mounted (){
// 这里还是获取name,但是打印出来的却是 李四
this.getNameFn();
//这里会执行 组件内的方法,打印 白七
this.setNameFn()
}
}