这篇文章主要介绍了Vue混入(mixin)的使用方法和注意事项，通过示例代码介绍做详细说明。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、什么是混入？

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

分为局部混入和全局混入，一般是局部混入，全局混入注册后，在任意组件都可以使用，谨慎使用全局混入对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。

二、使用场景

多个组件都会使用到的数据和方法，可以使用mixin，通过mixin文件里面定义好属性和方法，组件调用的时候会产生属性和方法的合并，共同使用。其中mixin中的钩子会优先执

三、使用步骤

1.基本使用

mixin相关文件

mixin-test.js

const mixinTest = {
  data() {
    return {
      msg: "这是mixin混入字段",
      countNum: 1,
    };
  },
  mounted() {
    console.log("mounted1---mixins");
  },
  methods: {
    mixinMethod() {
      console.log(this.msg + "，这是mixin混入的方法");
    },
    addCount() {
      this.countNum = +2;
      console.log("mixin方法addCount this.countNum", this.countNum);
    },
    addCountTwo() {
      return (this.countNum = +2);
    },
  },
};

export default mixinTest;

MixinPageA.vue

<template>
  <div>
    <p>这是MixinOne提示--->{{ hint }}</p>
    <p>这是引入mixin中msg--->{{ msg }}</p>
    <p>这是引入mixin中countNum--->{{ countNum }}</p>
    <p>
      <input
        class="mixin-button"
        type="button"
        value="A页面改变mixin值"
        @click="changeCount"
      />
    </p>
  </div>
</template>

<script>
//引入相关js
import mixinTest from "../mixin-test";
export default {
  name: "MixinOne",
  //引入
  mixins: [mixinTest],
  props: [""],
  data() {
    return {
      hint: "这是第 [ 一ONE ] 个混入文件",
    };
  },
  created() {
  	//可以直接使用mixin里面定义变量
    console.log("create--one", this.msg);
    // 在pageA直接调用mixins里面自增方法, 只会影响pageA里面的值 和PageB页面无关
    this.addCount();
  },
  mounted() {
    console.log("mounted--one", this.msg);
  },

  methods: {
    changeCount() {
      // this.addCount();
      console.log("one-changeCount", this.countNum);
    },
  },
  updated: {},
  beforeDestroy: {},
  destroyed: {},
};
</script>
<style lang="scss" scoped>
.mixin-button {
  border: none;
  background: #3c94e8;
  color: #fff;
  font-size: 14px;
  padding: 5px 10px;
  margin: 10px 0;
}
</style>

2.多组件同时使用

方法和参数在各组件中不共享，虽然组件调用了mixins并将其属性合并到自身组件中来了，但是其属性只会被当前组件所识别并不会被共享，也就是其他组件无法从当前组件中获取到mixins中的数据和方法。

mixin-main.vue里面引入组件A和组件B，组件A和组件B里面分别同时使用混入mixin，其中组件A对mixin里面字段值进行改变

mixin-main.vue

<template>
  <div>
    MiminMain
    <el-row :gutter="20">
      <el-col :span="12"><mixin-one></mixin-one></el-col>
      <el-col :span="12"><mixin-two></mixin-two></el-col>
    </el-row>
  </div>
</template>

<script>
import MixinOne from "./components/MixinPageA.vue";
import MixinTwo from "./components/MixinPageB.vue";
export default {
  name: "MiminMain",
  components: {
    MixinOne,
    MixinTwo,
  },
  props: {},
  data() {
    return {};
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>

<style scoped></style>

MixinPageB.vue

<template>
  <div>
    <p>这是MixinTWO提示--->{{ hint }}</p>
    <p>这是引入mixin中msg--->{{ msg }}</p>
    <p>这是引入mixin中countNum--->{{ countNum }}</p>
    <p>
      <input
        class="mixin-button"
        type="button"
        value="B页面改变mixin值"
        @click="changeCount"
      />
    </p>
  </div>
</template>

<script>
import mixinTest from "../mixin-test";
export default {
  name: "MixinTwo",
  mixins: [mixinTest],
  props: [""],
  data() {
    return {
      hint: "这是第 [ 一TWO ] 个混入文件",
    };
  },
  created() {
    console.log("create--two", this.msg);
    // this.addCount();
  },
  mounted() {
    console.log("mounted--two", this.msg);
  },

  methods: {
    changeCount() {
      // this.addCount();
      console.log("two-changeCount", this.countNum);
    },
  },
  updated: {},
  beforeDestroy: {},
  destroyed: {},
};
</script>
<style lang="scss" scoped>
.mixin-button {
  border: none;
  background: #3c94e8;
  color: #fff;
  font-size: 14px;
  padding: 5px 10px;
  margin: 10px 0;
}
</style>

当组件A对字段值进行改变的时候，组件B无影响

3.存在冲突和合并方式

值为对象(components、methods 、computed、data)的选项，混入组件时选项会被合并，键冲突时优先组件，组件中的键会覆盖混入对象的。当数据对象（data变量）或者对象键名（方法methods、components、directives）出现同名选项时，总会以组件为准。

四、与vuex的区别

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

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

五、与公共组件的区别

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

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

---

详细分析可以参考:
https://www.cnblogs.com/gerry2019/p/11889050.html

总结

暂时记录，有需要再补充。