vue的mixins属性详解
首先先给出官网https://vuejs.org/v2/guide/mixins.html
今天在开发项目的时候要改变一个标签的属性，因为项目中有多个地方都要改(业务逻辑相同)，所以就看有没办法只改变一个地方，把方法加进去,最后找官网就发现这个属性。
下面是我的-mixin.js文件
import{mapGetters,mapMutations,mapActions}from'vuex'
exportconstplaylistMixin={
computed:{
...mapGetters([
'playList'
])
},
mounted(){
this.handlePlaylist(this.playList)
},
activated(){
this.handlePlaylist(this.playList)
},
watch:{
playList(newVal){
this.handlePlaylist(newVal)
}
},
methods:{
handlePlaylist(){
thrownewError('componentmustimplementhandlePlaylistmethod')
}
}
}
这个文件就暴露出一个对象，不过这个对象和组件很类似，也就是组件的js代码部分类似。
这个.js文件要做的事情就是，在生命周期中和playList变量改变的时候触发handlePlaylist函数，但是这个函数的逻辑是在各自要改变的组件当中去实现。下面看看怎么用Mixin。
import{playlistMixin}from'common/js/mixin'//引入Mixin
exportdefault{
mixins:[playlistMixin],
methods:{
handlePlaylist(playlist){
letbottom=playlist.length>0?'60px':''
this.$refs.recommend.style.bottom=bottom
this.$refs.scroll.refresh()
},
}
}
在使用的组件中这样调用。
mixins:这个属性是个数组，也就是说可以加载多个minxin文件。
handlePlaylist方法是完成业务逻辑。所以在组件的生命周期中都会添加this.handlePlaylist()方法。
这样就可以减少一部分代码。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。