vue中mixin的混入使用--超详解

通俗的解释：

mixins是在引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了

作用：

多个组件可以共享数据和方法，在使用mixin的组件中引入后，mixin中的方法和属性也就并入到该组件中，可以直接使用。钩子函数会两个都被调用，mixin中的钩子首先执行。

1、在你的公共文件夹下建立一个mixin.js文件

2、在mixin文件中定义几个变量

const mixin = {
    data(){
        return{
            message:"hello",
            foo:"abc"
        }
    }
}
export default mixin;

3、在vue组件中去引用mixin文件，并使用里面定义的公共变量

-------以上就是关于变量的混入的使用，下面是混入方法

遇到值对象属性冲突（对象键名相同）时，组件选项优先 。当遇到函数方法选项时，mixins和组件中的都会被执行，且mixins中的会被先执行

1、在mixin的js文件中定义一个方法

2、分别在两个组件中进行使用该方法，这里是分别在main组件和menu组件进行了调用

                 

3、查看打印结果，发现两个组件分别调用该方法，变量num的值互不影响，因此可得出，mixin中的方法调用及变量的变化在各个组件中是相互独立的

组件和混入对象含有同名选项时：

（1）数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先

（2）值为对象的选项，如methods,components等，选项会被合并，键冲突的组件会覆盖混入对象的

混入对象中的方法

一句话：当数据对象（data变量）或者对象键名（方法methods、components、directives）出现同名选项时，总会以组件为准

-------钩子函数会两个都被调用，mixin中的钩子首先执行。

全局混入这里就不讲了，个人觉得哪个组件需要就在哪个组件引入mixin就好，想直接全局引入的小盆友可以自行看官网：https://cn.vuejs.org/v2/guide/mixins.html

与公共组件的区别

• 组件：在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

• Mixins：则是在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件

与vuex的区别

• vuex：用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

• Mixins：可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。