当多个组件都用到共同的一些js代码时候,可以吧这些代码抽象出来,放在mixin中,用到的时候引用
export const playlistMixin = {
computed: {
...mapGetters([
'playList'
])
},
mounted () { // 渲染完毕后触发
this.handlePlayList(this.playList)
},
activated () { // keep-alive 切换的时候 触发
this.handlePlayList(this.playList)
},
watch: {
playList (newList) {
this.handlePlayList(newList)
}
}
}
在组件引用
import {playlistMixin } from 'xxx.js'
export default {
mixins:[playlistMixin]
//之后再写需要的方法替换mixin中的共有方法
handlePlayList (playList) {
const bottom = this.playList.length > 0 ? '60px' : 0 // 当存在破防徐建时候,组件的bottom为60px
this.$refs.shortcutWrapper.style.bottom = bottom
this.$refs.shortcut.refresh() // 调用scrool内部接口刷新
this.$refs.searchResult.style.bottom = bottom
this.$refs.suggest.refresh()
},
当scroll包含两部分,而且两部分都是通过一部获取的,要等二者全部加载完毕后再刷新
可以将两部分合并成一个数组:
<scroll class="shortcut" :data="shortcut" ref="shortcut">
。。。
shortcut () {
return this.hotKey.concat(this.searchHistory)
// 当hotKey和History有一个发生变化的时候。computed就会重新计算。
}