vue-cli(vue2.x)中使用mixins（混入）

官网参考链接：https://cn.vuejs.org/v2/guide/mixins.html

前言：
混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

选项合并原则：

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

1、数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。
2、同名钩子函数将混合为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。
3、值为对象的选项，例如methods, components 和 directives，将被混合为同一个对象。两个对象键名冲突时，取组件对象的键值对。

1、在项目的公共的common/js文件中建立一个mixin.js文件

里面的代码书写遵循组件中的js代码风格：
（多个组件中抽出共同部分来写入到mixin.js中，这样只需使用混入，就能够有改一变多的效果了，就不需要一个组件一个组件的进行修改）
ps：mixin.js中可以export多个mixin对象出去给不同的组件进行混入。

mixin.js代码风格如下：

export let playlistMixin = {
    // 当组件的dom准备好了之后触发的
    mounted(){
        this.handlePlaylist(this.playList);

    },
    // 当视图的keepalive切换的时候触发的
    activated(){
        this.handlePlaylist(this.playList);
    },
    //监听playList变化
    watch:{
        playList(newVal){
            this.handlePlaylist(newVal);
        }
    },
    computed:{
    //..............
    },
    methods:{
        handlePlaylist(){
            // 如果组件中没有定义handlePlaylist这个函数那么就会执行mixin里面的函数主动抛出异常
            throw new Error ('component must implement handlePlaylist method')
        }
    }
}

export let playerMixin = {
//这里又是另外混入的代码
}

2、引入mixins

在需要混入的组件中把这个mixin引入：

import {playlistMixin} from “common/js/mixin.js”

3、在vue组件中注册mixin

在组件的js代码块中注册。

<script>
import {playlistMixin} from "common/js/mixin.js" //在需要混入的组件中把这个mixin引入

export default{
	mixins:[playlistMixin] //注册mixins
}
<script/>

4、在使用混入的组件methods中实现mixin.js中的methods中的函数代码

（如果引入了mixins而不定义handlePlaylist这个函数就会直接调用mixin.js中的handlePlaylist函数，然后主动抛出异常错误）

<script>
export default{
methods:{
      handlePlaylist(playlist){
        //这里添加该组件要重写handlePlaylist函数的代码
      }
 }
} 
<script/>