vue的混入（mixins）

1.什么是混入

混入 (mixin) ： 是一种分发Vue组件中可复用功能的非常灵活的一种方式。混入对象（mixins）是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、created、methods 、computed、watch等等。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

2.创建Mixins

在src目录下创建一个mixins文件夹，文件夹下新建自己要定义的混入对象js文件。使用对象的形式来定义混入对象，在对象中可定义与vue组件一样的data、components、created、methods 、computed、watch等属性，并通过export导出该对象.
我定义的pageMixin.js

export const  pageMixin={
    data() {
        return {
            page: { // 分页信息
                pageNo: 1, // 当前页
                limit: 10, // 每页行数
                total: 0, // 列表总数量
            },        
            tableList: [], // 列表数据
            loading: false, // 加载列表数据的Loading
            PAGE_SIZES: [5, 10, 20, 30, 50, 100], // 每页行数列表,用于切换每页行数
            LAYOUT: "total, sizes, prev, pager, next, jumper" // Element表格组件中使用的功能
        }
    },
    methods: {
        // 查询列表数据
        queryList() {},
        // 修改当前页
        handleCurrentChange(pageNo) {
            this.page.pageNo = pageNo;         
            this.queryList();
        },
        // 修改每页行数
        handleSizeChange(limit) {
            this.page.pageNo = 1;
            this.page.limit = limit;
            this.queryList();
        },
    },
}

3.使用Mixins

在需要调用的组件页面中引入pageMixin.js文件

import {pageMixin} from "@/mixins/pageMixin"
export default {
    mixins: [ pageMixin ],
    data() {
      return {    	
      }
    }        
}

• 组件调用了混入对象故混入对象的选项会合并到当前组件中。
• 当混入对象和组件含有同名选项时，这些选项将以恰当的方式进行“合并”。比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先，即发生冲突会覆盖混入对象的选项。

组件使用mixins例子

4.什么情况下需要使用mixins

当多个组件执行的方法和需要的数据类似时，我们可以提取出公共部分写入混入对象中，哪个组件需要用直接引入即可。

5.mixins的特性

组件使用mixins中的属性或者方法，当改变mixins的属性值或者是方法内部的一些逻辑操作时，只会在当前组件中起作用而并不会改变混入对象的属性值或者是方法，故其他组件引入mixins并使用其属性或者是方法时是不会受当前组件操作影响的（可类比继承，子继承了父的方法或属性，在子中对继承来的方法或属性做改变，是不会改变父的方法和属性的，更不会影响到其他的子继承父的属性和方法）

6. 与vuex的区别

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

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

tips: 请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。

点击查看vue.js文档混入（mixins）链接