vue中复用组件功能之mixin混入的用法

在开发过程中，我们可能会经常碰到项目的不同页面或组件中需要大量重复用到某个变量、计算属性或者方法，除了将这些变量、计算属性或方法存到状态管理中，还可以使用mixin混入。mixin混入一般有两种方式，局部混入和全局混入，不同组件混入不会影响原混入数据。

一、局部混入

1. 首先我们在项目的src目录下新建一个目录文件夹，我这里取名utils用于存放要混入的mixin文件，取名为myMixin.js
2. 在myMixin.js混入文件中：
3. 在views目录下创建Mixin.vue文件用来测试混入效果：
4. Mixin.vue文件如下：

<template>
    <div>
        <h2>mixin混入</h2>
        <div>{{ message }}</div>
        <div>{{ message2 }}</div>
        <button @click="sayHello">点击打印</button>
    </div>
</template>

<script>
import { myMixin } from '@/utils/myMixin'
export default {
    mixins: [myMixin]
}
</script>

<style scoped></style>

我们可以看出局部混入还是比较简单的，只需要在需要混入的页面或组件中引入myMixin就可以使用其中的变量、计算属性和方法，但如果要用到的组件很多，这样每个都需要引入还是稍显麻烦。这时我们可以使用全局混入。

二、全局混入

1. 在main.js中引入myMixin混入文件
2. 然后进行配置全局混入
3. 此时Mixin.vue中什么都不需要做，直接用混入文件中的变量、计算属性和方法就可以啦
4. 我们来看运行效果：

可以看到，数据成功显示出来了。注意：mixin在vue2中用的较多，vue3虽然也可以用，但vue3中的Hooks代替了vue2的mixins。