Vue2中mixins的介绍和使用

一、什么是mixins

一种分发 Vue 组件中可复用功能的非常灵活的方式，mixins 是一个 js 对象，它可以包含我们组件script中的任意功能选项，如：data、components、methods、created、computed 等等。我们只要将公用的功能以对象的方式传入 mixins 选项中，当组件使用 mixins 对象，所有 mixins 对象的选项都将被扩展到该组件本身的选项中来，这样就可以提高代码的重用性，并易于后期的代码维护。

当存在多个组件中的数据或者功能很相近时，我们就可以利用 mixins 将公共部分提取出来，通过 mixins 封装函数。

二、创建mixins

src--》创建mixins文件夹---》创建myMixins.js--》

三、使用mixins

组件中使用：

全局使用：

四、mixins的特点

1、所有的属性与方法再不同的组件中不共享数据

2、当与组件中数据与方法名重名时，组件中的会覆盖mixins中的（换句话说：会先调用mixins）

五、mixins 中有异步请求的情况

当混入里面包含异步请求函数，而我们又需要在组件中使用异步请求函数的返回值时，我们会取不到此返回值，解决方案是：不要返回结果，而是直接返回异步函数

methods: {

   async getDate1() {

      let result = await new Promise((resolve,reject) => {

          let a = 1;

          setTimeout(() => {

            resolve(1)

          },500)

       })

       return result

    },

  }

// 组件中获取混入的异步函数，通过then 方法获取函数值。

import { myMixins } from "./myMixins.js";

export default {

  mixins: [myMixins],

  data() {

    return {}

  },

  mounted() {

    this.getDate1().then(res => {

      console.log(res)

    })

  }

}

六、与 vuex 的区别

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

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

六、与公共组件的区别

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

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