Vue之mixins

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

(通俗：当A面使用了a mixin 那么 a mixin文件里的所有东西都属于A页面了)

使用案例：

新建一个混入对象  aMixin.js

export const aMixin = {
	data(){
		return{
			text:'我是a混淆对象的值'
		}
	},
    methods:{
        amixinWay(){
            console.log("我是amixin里的方法")
        }
    }
}
export default aMixin

在页面A引入aMixin.js

<template>
    <div>
        我是A页面
    </div>
</template>
<script>
   //引入混淆对象
    import aMixin from '../../utils/aMixin.js';
    export default{
         mounted() {
            console.log("===",this.text) //这里打印混淆对象的值
            this.amixinWay();//这里使用混淆对象里的方法
         }
    }
</script>

这就是基本使用方法啦

mixins的特点：

①：不同页面引入了相同的mixin对象  并对混淆对象里的值进行了数据更改，是互不影响的。比如A页面对 x 混淆对象的数据 num+1了 ，B页面再去拿取x 混淆对象的num,这时的num还是初始化的值 没有+1。

②：当组件存在与mixin对象有相同的选项（data数据和methods方法）的时候，进行递归合并的时候引用页面的选项会覆盖mixin的选项

③：当组件存在与mixin对象有相同的选项，如created,mounted等，就会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用

④：当一个页面同时引入了  a b 两个mixin对象时，a 和 b 之间的值可互相调用

参考文章：

Vue 中mixin 的用法详解_面条请不要欺负汉堡的博客-CSDN博客_vue.mixin