混入 (Mixin)

混入（Mixin）是 Vue 提供的一种机制，用于将多个组件共用的配置提取成一个混入对象，从而实现配置的复用。

功能

混入可以将多个组件共用的配置（如数据、方法、生命周期钩子等）提取成一个混入对象，实现配置的复用。

1. 定义混合

首先，在一个单独的 JavaScript 文件中定义一个混入对象，包含需要复用的配置，并导出这个混入对象。

// myMixin.js
export const myMixin = {
  data() {
    return {
      sharedData: '这是混入的数据' // 共享的数据
    };
  },
  methods: {
    sharedMethod() {
      console.log('这是混入的方法'); // 共享的方法
    }
  },
  created() {
    console.log('这是混入的 created 钩子'); // 共享的生命周期钩子
  }
};

2. 使用混入

混入可以全局使用或局部使用。

配置全局混入

在 main.js 文件中引入混入文件中的配置并全局注册。全局混入会使得所有的 Vue 实例（包括根实例和所有子组件）都具有混入的配置。

// main.js
import Vue from 'vue';
import App from './App.vue';
import { myMixin } from './myMixin';

// 全局混入：所有组件都会有 sharedData 和 sharedMethod
Vue.mixin(myMixin);

new Vue({
  render: h => h(App),
}).$mount('#app');

使用全局混入后的组件示例：

<template>
  <div>
    <!-- 直接使用混入的数据 -->
    <h1>{{ sharedData }}</h1>
    <!-- 直接调用混入的方法 -->
    <button @click="sharedMethod">点击调用混入方法</button>
  </div>
</template>

<script>
export default {
  name: 'ExampleComponent',
  data() {
    return {
      localData: '这是组件自己的数据' // 组件自己的数据
    };
  },
  created() {
    console.log('这是组件自己的 created 钩子');
  }
};
</script>

<style>
/* 这里可以添加一些样式 */
</style>

配置局部混入

在组件配置项中引入混入对象，并在 mixins 数组中使用。局部混入只会影响使用该混入的组件。

<template>
  <div>
    <!-- 直接使用混入的数据 -->
    <h1>{{ sharedData }}</h1>
    <!-- 直接调用混入的方法 -->
    <button @click="sharedMethod">点击调用混入方法</button>
    <!-- 使用组件自己的数据 -->
    <p>{{ localData }}</p>
  </div>
</template>

<script>
import { myMixin } from './myMixin';

export default {
  name: 'ExampleComponent',
  mixins: [myMixin], // 局部混入：只有这个组件会有 sharedData 和 sharedMethod
  data() {
    return {
      localData: '这是组件自己的数据' // 组件自己的数据
    };
  },
  created() {
    console.log('这是组件自己的 created 钩子');
  }
};
</script>

<style>
/* 这里可以添加一些样式 */
</style>

3. 原则和注意事项

• 不破坏原有代码：混入不会破坏组件原有的代码，而是将混入对象中的配置合并到组件中。
• 全局混入影响范围大：全局混入会影响所有的 Vue 实例和组件，因此应谨慎使用，以避免意外影响。
• 生命周期钩子合并：当组件和混入对象中有同一个生命周期钩子时，所有的钩子函数都会被调用。混入对象中的钩子先执行，然后是组件自己的钩子。
• 混入方法和属性的调用：混入的方法和属性在组件中使用时，需要通过 this 关键字来调用。在 <template> 中使用混入的属性和方法时，不需要使用 this。