定义

混入（mixin）提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项（如data、methods、mounted等等）。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。?

?个人理解：就是有很多组件需要同一个方法。同一个变量。做同样的事。这个时候就用到这个混入的功能。混入之后变量组件内可用，方法也可用，写在周期函数的代码也会执行。

可以将混入理解为一个公共组件，这个公共组件可以融合到其他组件中。编写代码的时候。可以将组件中相同的部分抽象出来写成一个混入对象，减少代码重复。

使用方法

1. 写一个混入文件（mess.js）

//mess.js

export default {
  data() {
    return {
      message: '我是混入中的变量'
    };
  },
 
  mounted() {
    console.log(this.message)
  }
};

2. 导入混入

（1）局部混入

在需要的组件或者页面引入

<template>
  <div class="top">
    
  </div>
</template>
 
<script>
import mess from '@/mixin/mess';  // 直接引入
export default {
  mixins: [mess],  // 注册
  components: {
 
  },
  data() {
    return {
      shopInfos: [],
      isLoading: false
    };
  },
 
  created() {
    console.log(this.message);  // 这里就可以使用混入对象里的变量
  },
  computed: {
    
  },
  methods: {
    
  }
};
</script>
 
<style lang="scss" scoped>
</style>

（2）全局混入

在main.js加入以下代码

注意：全局混合被注册到了每个单一组件上。它们的使用场景及其有限要小心。

Vue.mixin({
  data() {
    return {
      msg: 'hello'
    }
  },
  methods: {
    mixinMethod() {
      console.log(this.msg+'，这是mixin混入的方法')
    }
  }
})

在组件中直接引用：

<template>
	<div>{{msg}}</div>
</template>
<script>
export default {
    data() {
	    return {
	    }
    }
	mounted() {
		this.mixinMethod()
	}
}

// hello，这是mixin混入的方法
</script>

混入规则

1.钩子函数

混入对象的钩子将在组件自身钩子之前调用。

 //  minxin.js

<script>
const mixin = {
  data() {
    return{
      msg1: '我是混入内容1',
      msg2: '我是混入内容2'
    }
  },
  created() {
    console.log(this.msg3)
  }
}
export default mixin;
</script>



// 页面组件
<template>
  <div class="header">
    <h1></h1>
  </div>
</template>mess
<script>
import mixin from '@/mixin/mixin'
export default {
  mixins: [mixin],
  name: 'Header',
  data(){
    return{
      msg1: '我是组件内容1',
      msg3: '我是组件内容2'
    }
  },
  created() {
      console.log(this.msg2)
      console.log(this.msg1)
  },
}
</script>
  
	// 我是组件内容2
	// 我是混入内容2
	// 我是组件内容1

2.普通方法合并

当混合值为对象的选项时，例如 methods、components、directive，将被混合为同一个对象，两个对象键名冲突时，取组件对象的键值对。

<body>
    <div id="app"></div>
</body>
<script src="./vue.js"></script>
<script>
    var Mixins = {
        methods: {
            mixin: function() {
                console.log('MixinOne')
            },
            mixinTwo: function () {
                console.log('MixinTwo')
            }
        }
    }
    new Vue({
        el: '#app',
        mixins: [Mixins],
        methods: {
            mixin: function () {
                console.log('component')
            }
        },
        mounted() {
            this.mixin()
            this.mixinTwo()
        }
    })
    
	// component
	// MixinTwo
</script>

总结

混入的规则：

数据对象进行合并，其中的基本数据类型在和组件的数据发生冲突时以组件数据优先，组件中的数据会覆盖混入对象的数据。
数据对象中如果有引用数据类型，引用数据类型会进行深参差的递归合并。
生命周期钩子函数混合为一个数组，当使用组件时，组件的函数和混和的函数都执行，混入中的函数会先执行，组件的函数后执行。
值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。