局部混入：

基础实例：

创建mixin.js：

//抛出混入对象，方便外部访问
export const mixin = {
    data() {
        return {
            number: 1
        }
    },
}

在组件中使用：

<template>
  <div class="test1">
    <h1>test1</h1>
      // 使用mixin中的变量
    <div>混入的值：{{ number }}</div>
  </div>
</template>

<script>
 // 引入mixin.js
import { mixin } from "../../untils/mixin";
export default {
  // 将mixins注册到当前组件
  mixins: [mixin],
	...
}
</script>

注意点

1. 方法和参数在各组件中不共享

   比如，当我修改了组件1后，并不会通知mixin进行实时刷新数据，发生的变化只会在组件1生效，不会影响其他组件。

   我们给组件1混入的值加1：

   // 组件1
   import { mixin } from "../../untils/mixin";
   export default {
     mixins: [mixin],
     data() {
       return {};
     },
     mounted() {
       this.number++;
     }
   }
   ...
   

   

   上图分别是组件1和组件2混入的值，可以看到组件1在mounted()生命周期中将混入的值自增1后，组件2并没有收到影响。

2. 当组件和混入对象含有同名选项时，这些选项将以恰当方式进行合并

   mixin中申明了：如果是同名钩子函数将合并为一个数组，因此都将被调用，但是混入对象的钩子函数将在自身实例钩子函数之前触发。

   我们修改一下mixin.js和组件1的代码：

   // mixin.js
   export const mixin = {
       data() {
           return {
               number: 1
           }
       },
       mounted(){
           console.log("hello mixin");
       },
   }
   
   // 组件1
   ...
     mounted() {
       console.log("hello Vue");
     },
   ...
   

   输出结果为：

​ 通过上图我们可以看到，混入对象的钩子函数优先于组件1触发了。

​ 当组件和mixin存在同名变量或方法时，将会以组件优先并进行递归合并，相当于组件数据直接覆盖了mixin 中的同名数据。

​ 我们修改一下mixin.js和组件1的代码：

// mixin.js
export const mixin = {
    data() {
        return {
            number: 1
        }
    },
    methods: {
        demo1() {
            console.log("这里是mixin");
        }
    }
}

// 组件1
  methods: {
    demo1() {
      console.log("这里是组件1");
    },
  },

​ 输出结果为：

​ 通过上图我们可以看到，组件1直接覆盖了mixin中的同名方法。

全局混入：

全局混入我们只需要在main.js中进行以下步骤即可：

// main.js
import Vue from 'vue'
import App from './App'

import mixin from "./mixin/mixin.js"// 引入mixin.js
Vue.mixin(mixin)

注意

全局混入将会影响每一个组件的实例，请小心谨慎的使用！