提取组件公共部分进行封装,达到公用的目的。
//A组件
export default {
data(){
return {show:true}
},
methods:{
toggleShow(){
this.show=!this.show;
}
}
}
//B组件
export default {
data(){
return {show:true}
},
methods:{
toggleShow(){
this.show=!this.show;
}
}
}
上述代码中可以发现 A组件和B组件都有公共数据show和公共方法toggleShow,为了避免代码冗余,利用混入提高代码复用性。
//新建一个minxin.js文件,代码如下
//vue有的配置项 mixin都可以配置
export default {
data(){
return {show:true}
},
methods:{
toggleShow(){
this.show=!this.show;
}
}
}
//然后分别修改上述A组件B组件代码
//A组件
import mixinA from './mixin'
export default {
mixins:['mixinA ']
}
//B组件
import mixinB from './mixin'
export default {
mixins:['mixinB ']
}
。
配置一个mixins属性,接收一个数据,就可以了。代码复用性是不是提高了许多