Vue中混入的使用（Mixin）

当出现类似组件，功能又有重叠的地方，但又具有比较大的差异时可以使用Mixin，只提取公共的部分。然后混入到多个组件中。（写法与组件非常类似，很容易上手）

Mixin的基本用法

现在的场景是 多个页面底部有A组件，多个页面内容都可滑动，滑动到最底部时一部分内容被A组件遮挡，（滑动用的scorll组件）这时需要在页面有数据时给scroll一个bottom等于A组件的高度再重新计算scroll

scroll组件是利用better-scroll封装的一个组件 详见另一篇 点击传送

多个组件需要写相同逻辑,推荐使用Mixin

// mixin.js
import {mapGetters} from 'vuex'
export const playlistMixin = {
    computed: {
        ...mapGetters(['playlist'])
    },
    mouted() {
        this.handlePlaylist(this.playlist)
    },
    activated() {
        this.handlePlaylist(this.playlist)
    },
    watch: {
        playlist(newVal) {
         	this.handlePlaylist(this.playlist)
        } 
    },
    methods: {
        // handlePlaylist需要被具体组件实现 当混入的组件中有这个方法时会覆盖mixin中的同名方法
        handlePlaylist() {
            // 没有时 我们手动抛一个error
            throw new Error ('error')
        }
    }
}

混入到组件中

// music-list.vue
// 引入
import {playlistMixin} from './mixin'
// mixins属性混入

export default {
    // 可以混入多个 逗号隔开
    mixins: [playlistMixin],
    data() {
        return {
        }
    }，
    methods: {
    	handlePlaylist(list) {
    		const bottom = list.length > 0 ? '60px' : ''
    		// scroll组件的dom
    		this.$refs.list.$el.style.bottom = bottom
    		// 重新计算高度，最大滑动高度也会被重新计算 达到内容不被A组件遮挡的效果
    		this.$refs.list.refresh()
		}
	}
}
// 混入到其他页面写法也一样 只是handlePlaylist的方法体根据每个页面不同来写

已经在多个组件写了相同逻辑或功能 也可以提取出来再混入 减少代码量 也方便维护