VUE的混入mixin使用方法及用途

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

个人理解： 就是有很多组件需要同一个方法。同一个变量。做同样的事。这个时候就用到这个混入的功能。混入之后变量组件内可用，方法也可用，写在周期函数的代码也会执行。

写一个mess.js文件

export default {
  data() {
    return {
      message: '我是混入中的变量'
    };
  },

  mounted() {
    console.log(this.message)
  }
};

组件中调用

<template>
  <div class="tab_home">
    
  </div>
</template>

<script>
import mess from '@/mixin/mess';  // 直接引入
export default {
  mixins: [mess],  // 注册
  components: {

  },
  data() {
    return {
      shopInfos: [],
      isLoading: false
    };
  },

  created() {
    console.log(this.message);  // 这里就可以使用混入对象里的变量
  },
  computed: {
    
  },
  methods: {
    
  }
};
</script>

<style lang="scss" scoped>
</style>

组件内使用后，混入对象内的周期函数和方法变量都会和组件合并，而且是优先执行，一旦出现冲突变量冲突方法以组件为主。

一般混入都是在单组件内应用比较合适

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。（不推荐全局引入）

 实际用途包括

keep-alive组件记录滚动条位置，回来时跳转到指定滚动位置。

keep-alive组件销毁函数

提示框等等

思路就是当你觉得几个组件内都调用了同一个函数同一个变量，执行同一个操作。此时要是使用这个。

要和vuex区分开，vuex管理数据统一，混入是变量统一，但是每个变量在组件内是不同的。

vuex 相当于 a 的值 一改都改一变都变

混入相当于，帮你提前先定义一个变量。或者说定义个方法，执行段代码。

结束