在vue中使用mixins可以大大提高代码的复用性，一个mixins对象可以包含vue组件中的任意选项，可以是data、methods等。
如果mixins对象与vue组件中都含有同名的钩子函数（如created），同名钩子函数将合并为一个数组，因此都将被调用，先执行mixins对象的钩子函数再执行vue组件的。
如果mixins对象含有与vue组件中同名的值为对象的选项（如data、methods），同名对象将合并为同一个对象，若对象的键值名冲突，则使用vue组件中的键值对。

const mixin = {
  data(){
    return{
      team:"green",
      age:16
    }
  },
  methods:{
    sayHi(){
      console.log("i'm green")
    }
  },
  created(){
    console.log("mixins created frist")
  }
}

new Vue({
  mixins:[mixin]
  data () {
    return{
      name:"cat",
      age:2
    }
  },
  methods:{
    sayHi () {
      console.log("i'm cat")
    }
  },
  created () {
    console.log(this.$data)      
    this.sayHi()   
  }
})

//mixins created frist
// green,cat,2
// i'm cat

举个栗子
在项目使用elementui时，可能多个页面都会用到Pagination 分页组件，这时就可以将Pagination中需要用到的data和回调函数封装成一个mixins对象。

pagMixins.js

const listPage = {
    data () {
      return {
        pageSize:50,
        currentPage:1,
        totalNum:500
      }
    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
      }
    }
  }
  export default listPage

Pagination.vue

<template>
  <el-pagination @size-change="handleSizeChange"
                 @current-change="handlePageNumChange"
                 :current-page="currentPage"
                 :page-size="pageSize"
                 :total="totalNum"
                 :page-sizes="[10, 20, 50, 100]"
                 layout="total, sizes, prev, pager, next, jumper">
  </el-pagination>
</template>

<script>
import mixin from '@/mixins/pagMixins'  //引入需要用到的混入对象
export default {
  mixins: [mixin]
}
</script>

这样在每个需要用到分页组件的地方都可以直接使用pagMixins这个mixins对象了。