功能：

可以把多个组件共用的配置提取成一个混入对象

使用方式：

第一步定义混合：

  1. {
  2.     data(){....},
  3.     methods:{....}
  4.     ....
  5. }

第二步使用混入：
全局混入（main.js）：Vue.mixin(xxx)
局部混入（可以引入多个混合[ ]）：mixins:['xxx']

使用流程：

局部混合

mxin.js (一般main同级) 

  1. export const hunhe = {
  2.     methods: {
  3.         showName(){
  4.             alert(this.name)
  5.         }
  6.     },
  7.     mounted() {
  8.         console.log('你好啊！')
  9.     },
  10. }
  11. export const hunhe2 = {
  12.     data() {
  13.         return {
  14.             x:100,
  15.             y:200
  16.         }
  17.     },
  18. }


对应组件引入+配置 

  1. import {hunhe,hunhe2} from '../mixin'
  3. export default {
  4.   //name...,
  5.   //data...,
  6.   mixins:[hunhe,hunhe2]
  7. }

全局混合

所有子组件都会有

main.js

  1. import {hunhe,hunhe2} from './mixin'
  3. Vue.mixin(hunhe)
  4. Vue.mixin(hunhe2)

注意事项：

  1. 一个组件可以引入多个混合
  2. data，methods等会被合并（以组件为主）
  3. 声明周期函数重复也混合叠加