背景

多个vue文件出现大量重复的函数和生命周期处理时使用mix混入

minx混入

当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
vue2官网案例

// 定义一个混入对象
var myMixin = {created: function () {this.hello()},methods: {hello: function () {console.log('hello from mixin!')}}
}// 定义一个使用混入对象的组件
var Component = Vue.extend({mixins: [myMixin]
})var component = new Component() // => "hello from mixin!"

查看vue2的mixins来源
options api

可以混入vueComponent的组件
继承composition api v3版本的（有setup）

可见mininx混入的类型为一个vue的类型

使用

1.定义了一个mix.js

声明 mixName变量和mixFunc的函数

export default {data () {return {mixName: 'yma16'}},methods: {mixFunc () {console.log('mix的作用域 this', this)this.$message.info('mix的mixFunc方法')}}
}

2. 定义一个组件混入mix

mixins混入定义的mix组件

<template><div class="container"><h1>{{ msg }}</h1><el-divider>mix</el-divider><el-button @click="say">当前组件的say方法</el-button><el-divider>mix</el-divider><el-button @click="mixFunc">mix的方法</el-button></div>
</template><script>
import mix from './mix'
export default {name: 'StudyMix',mixins: [mix],data () {return {msg: 'mix 混入'}},methods: {say () {console.log('当前组件的作用域 this', this)this.$message.info('组件的say方法')}}
}
</script>

mix的同享组件作用域this相同

对比组件和混入的this

验证node的tag一样

this打印的值相同

使用场景

举个我工作中实际应用到的场景

1. 表格是使用比较多的，可以提取表格的打印和获取选中行的方法到mix
2. 文件下载的方法封装到一个mix去调用

注意点：mix中调用的变量要确保在组件中存在，使用不熟练很容易出现undefined和命名冲突的错误

结尾

感谢阅读，如有问题，欢迎指正！