混入（mixin）是指将多个组件重复的、可共用的配置选项提取成一个混入对象，然后在这些组件中对这些配置选项进行重用。

局部混入

局部混入是指在组件或特定的Vue实例中引入通用的配置对象。

例如：

 1/**
 2 * mixin.js
 3 * 混入配置对象
 4 */
 5
 6// 组件中的配置选项基本上都能在 mixin 中使用
 7export const mixin1 = {
 8  methods: {
 9    showName() {
10      alert(this.name)
11    }
12  },
13  mounted() {
14    console.log('Hello mixin1!');
15  },
16}
17
18export const mixin2 = {
19  data() {
20    return {
21      x: 100,
22      y: 200,
23    }
24  },
25  mounted() {
26    console.log('Hello mixin2!');
27  },
28}

 1<!-- 
 2  MySite.vue
 3 -->
 4<template>
 5  <div>
 6    <h2 @click="showName">网站名称：{{name}}</h2>
 7    <h2>网站地址：{{url}}</h2>
 8  </div>
 9</template>
10
11<script>
12// 引入一个混合
13import { mixin1, mixin2 } from "../mixin";
14
15export default {
16  name: 'MySite',
17  data() {
18    return {
19      name: 'Linner\'s Blog',
20      url: 'blog.linner.asia',
21      x: 666, // 
22    }
23  },
24  /**
25   * mixins 中相同的生命周期函数会以被注册的顺序执行
26   */
27  mixins: [mixin1, mixin2,],
28  /**
29   * 配置重复的生命周期函数，它们都会被Vue调用
30   * mixins 中的会先被调用
31   */
32  mounted() {
33    console.log('Hello MySite!');
34  },
35};
36</script>

全局混入

全局混入是指在Vue原型对象中引入通用配置对象，这个配置对象在全局生效，项目中所有的Vue实例和组件都会自动启用该配置。

全局混入使用的是Vue.mixin()方法。

例如：

 1/**
 2 * main.js
 3 */
 4
 5import Vue from 'vue'
 6import App from './App.vue'
 7
 8import { mixin1, mixin2 } from "./mixin";
 9
10Vue.config.productionTip = false
11
12// 全局应用 mixin
13Vue.mixin(mixin1)
14Vue.mixin(mixin2)
15
16new Vue({
17  render: h => h(App),
18}).$mount('#app')

注意事项

使用mixin时需要注意：

  • 组件中的配置选项基本上都能在mixin中使用。
  • 当混入对象和组件中的某些配置（例如data、计算属性、methods）重复时，以组件中的配置为主。
  • 当混入对象和组件中的生命周期函数重复时，它们都会被Vue调用，并且mixins中的生命周期函数会先被Vue调用。
  • 如果mixins中存在相同的生命周期函数，Vue会按照mixin在组件mixins中被注册的顺序进行调用。