vue中mixins的用法(混入对象的使用)

作用

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

vue中的mixins可以定义哪些内容呢？

官网的说明：混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

大致意思就是：

1） 混入对象的内容必须是一个对象。

2） 当使用混入时，相同的内容都会合并。

3） 数据对象如果有相同的，则以被混入的对象中data数据为准

注意：

1） mixins 这个属性接收的是 一个数组 可以有多个mixins的内容，比如：mixins：[ mix1, mix2 , mix3]，前提是定义了这些混入对象，不然就会报错。

2） 从上个栗子可以看出，只要是属于实例（或组件）的内容都是可以混入的，包括 el 。。。

3） 混入对象中如果有生命周期的 钩子 ，那么 混入对象 和 被混入对象的钩子都会被执行一遍，而且 混入对象的钩子将在 实例（或组件）自身钩子之前先执行。因为同名钩子函数将混合为一个数组，因此都将被调用。

4） 混入的方法methods，计算属性computed ，组件components，数据data等，只要值是为对象的，都是会被合并的。并且如果有相同的键值 ， 则会以 被混入对象中的 键值 即 以实例（或对象）中的内容为准。

4） 比如在 data 中 age 这一项是相同的，这个时候是以 被混入 的对象中数据 优先 。

5） 所以 age 是 13 就很好理解了。 首先 被混入的对象的data数据优先，那么 age就是 10 ；然后 到达生命周期 mounted 的时候，混入的对象中的代码，执行一次，被混入的实例中的代码，再执行一次。 所以最终的结果就是13。

全局混入

当然，mixins也有全局混入的方法，不过这样会让所有的实例都共享混入的内容。混入的规则还是一样的。

Vue.mixin({
   //这里是要混入的内容
})

请谨慎使用全局混入的方法。毕竟只要使用了全局混入，所有实例都会共享  混入的内容  不管你是否   添加了  mixins 这个属性选项。

局部混入

就是在单个vue文件中使用

export default {
  name: 'BasicAnalysis',
  mixins: [BaseMixin, SortMixin, SummaryMixin],
  data() {
    return {
      postParams: {}, // 筛选参数
    }
  }
 }

与vuex的区别

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

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

与公共组件的区别

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

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

基础

一、什么是Mixins

mixins（混入），官方的描述是一种分发 Vue
组件中可复用功能的非常灵活的方式，mixins是一个js对象，它可以包含我们组件中script项中的任意功能选项，如data、components、methods
、created、computed等等。我们只要将共用的功能以对象的方式传入 mixins选项中，当组件使用
mixins对象时所有mixins对象的选项都将被混入该组件本身的选项中来，这样就可以提高代码的重用性，使你的代码保持干净和易于维护。

二、什么时候使用Mixins

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

三、如何创建Mixins

在src目录下创建一个mixins文件夹，文件夹下新建一个myMixins.js文件。前面我们说了mixins是一个js对象，所以应该以对象的形式来定义myMixins，在对象中我们可以和vue组件一样来定义我们的data、components、methods
、created、computed等属性，并通过export导出该对象

myMixins.js：

// myMixins.js
export default {
   data () {
     return {
          num:1
      }
   },
   mounted() {
   	  this.speak();
   },
   methods: {
      speak() {
          console.log(this.num);
      },
   }
}

四、如何在组件中使用Mixins

在需要调用的组件中引入myMixins.js文件，然后在export default 中引入你需要的对象即可

Mixins的特点

（1）方法和参数在各组件中不共享，虽然组件调用了mixins并将其属性合并到自身组件中来了，但是其属性只会被当前组件所识别并不会被共享，也就是其他组件无法从当前组件中获取到mixins中的数据和方法。
（2）引入mixins后组件会对其进行合并，将mixins中的数据和方法拓展到当前组件中来，在合并的过程中会出现冲突，接下来我们详细了解Mixins合并冲突

关于Mixins合并冲突

（1）值为对象(components、methods 、computed、data)的选项，混入组件时选项会被合并，键冲突时优先组件，组件中的键会覆盖混入对象的
（2）值为函数(created、mounted)的选项，混入组件时选项会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用

vue中mixins的使用方法和注意点 (异步请求的情况)

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

如下：
Mymixins.js文件中

// myMixins.js
export const myMixins = {
  components:{},
  data() {
    return {
      num: 1,
    }
  },
  methods: {
    getDate1() {
	  new Promise((resolve,reject) => {
	      let a = 1;
	      setTimeout(() => {
	        resolve(a)
	      },500)
	    }).then(res => {
	      console.log(res,'res');
	      return res
	  })
    },
  }
}

todo.vue 文件中

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

export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  mounted() {
    console.log(this.getDate1,'template1-func_one')
  }
}

解决方案：不要返回结果而是直接返回异步函数

// myMixins.js
export const myMixins = {
  components:{},
  data() {
    return {
      num: 1,
    }
  },
  methods: {
   async getDate1() {
	  let result = await new Promise((resolve,reject) => {
	      let a = 1;
	      setTimeout(() => {
	        resolve(1)
	      },500)
	   })
	   return result
    },
  }
}


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

export default {
  mixins: [myMixins],
  data() {
    return {}
  },
  mounted() {
    this.getDate1().then(res => {
      console.log(res,'template1-res')
    })
  }
}

原文链接：https://blog.youkuaiyun.com/weixin_46316234/article/details/121695097
https://www.cnblogs.com/Ivy-s/p/9937173.html