vue中的mixin用法 -- 可与组件混合的对象

当你的vue项目中，组件之间有很多相似的地方的时候，你一遍遍的复制代码也挺麻烦的，vue官方给我们提供了一种方法，叫做“混入” – mixin

一、概念

和组件的差别

父组件 + 子组件 === 父组件+子组件
父组件 + mixin === 新父组件

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。mixins 选项接受一个混入对象的数组。

二、组合规则

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”

1. 同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

这些混入实例对象可以像正常的实例对象一样包含选项，他们将在 Vue.extend() 里最终选择使用相同的选项合并逻辑合并。举例：如果你的混入包含一个钩子而创建组件本身也有一个，两个函数将被调用。
Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。

//都有 created 钩子函数
var mixin = {
  created: function () { console.log(1) }
}
var vm = new Vue({
  mixins: [mixin],
  created: function () { console.log(2) }
})
// => 1
// => 2

2. 数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先

var mixin = {
  data: function () {
    return {
      message: 'hello',
      foo: 'abc'
    }
  }
}

new Vue({
  mixins: [mixin],
  data: function () {
    return {
      message: 'goodbye',
      bar: 'def'
    }
  },
  created: function () {
    console.log(this.$data)
    // => { message: "goodbye", foo: "abc", bar: "def" }
  }
})

3. 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

var mixin = {
  methods: {
    foo: function () {
      console.log('foo')
    },
    conflicting: function () {
      console.log('from mixin')
    }
  }
}

var vm = new Vue({
  mixins: [mixin],
  methods: {
    bar: function () {
      console.log('bar')
    },
    conflicting: function () {
      console.log('from self')
    }
  }
})

vm.foo() // => "foo"
vm.bar() // => "bar"
vm.conflicting() // => "from self"

三、案例

QQ音乐案例（https://pan.baidu.com/s/1m0a3kzorR94t0VJmwD9X8g）
提取码：xs1y

/*
 * mixin组件，为了使多个组件公用
 * 为了处理有音乐播放在底部的时候，更新scroll，
 * 使各个组件能滑动到底部
 * */
import {mapGetters, mapMutations, mapActions} from 'vuex'
import {playMode} from 'common/js/config'
import {shuffle} from 'common/js/util'

/* playList有值以后，表示有歌曲播放，有音乐播放器最小化，
 * 组件bottom改变
 * musicList视频详情、歌手、推荐、排行、搜索页面等使用
 * */
export const playlistMixin = {
  computed: {
    ...mapGetters([
      'playList'
    ])
  },
  mounted() {/*在组件DOM-ready(元素加载完)的时候触发*/
    this.handlePlaylist(this.playList)
  },
  activated() {/*keep-alive切过来的时候，会触发这个事件*/
    this.handlePlaylist(this.playList)
  },
  watch: {
    playList(newVal) {
      this.handlePlaylist(newVal)
    }
  },
  methods: {
  	/*组件同名的方法，会覆盖mixin里面的方法,以报错的形式抛出*/
    handlePlaylist() {
      throw new Error('component must implement handlePlaylist method')
    }
  }
}

组件中引用

import { playlistMixin } from 'common/js/mixin'
export default{
	mixins: [playlistMixin],
	data(){
		return { }
	},
	mounted(){ },
	methods:{ }
}

官方文档：https://cn.vuejs.org/v2/api/#mixins
https://cn.vuejs.org/v2/guide/mixins.html#基础