1. 理解
Mixin对象分发 Vue 组件中的可复用功能。
mixin 的本质就是一个 JS 对象，它可以有 data、created、methods 等等 vue 实例中拥有的所有属性，甚至可以在 mixins 中再次嵌套 mixins
这有点像注册了一个 vue 公共方法，可以在多个组件中使用。还有一点类似于在原型对象中注册方法，并且可以定义相同函数名的方法进行覆盖
2. 使用场景
多个组件中都用到了一些公用的方法、数据时。
有两个非常相似的组件，他们的基本功能是一样的，但他们之间又存在着足够的差异性。把它拆分成两个不同的组件呢？把它拆分成两个不同的组件呢？ 如果拆分成两个组件，你就不得不冒着一旦功能变动就要在两个文件中更新代码的风险，这违背了 DRY 原则。 反之，太多的props传值会很快变得混乱不堪，从而迫使维护者（即便这个人是你）在使用组件的时候必须理解一大段的上下文，拖慢写码速度。
3. 相关代码
新建Mixin.vue组件
<template>
<div></div>
</template>
<script>
export default {
name: 'MixinsTestMain',
components: {},
props: {},
data () {
return {
mixinData: 'mixin中的变量'
}
},
computed: {},
mounted () {
},
methods: {
mixinFunction () {
return '我是mixins里面的公共方法'
}
}
}
</script>
<style scoped>
</style>
// 页面中局部混入
<template>
<div class="about">
<el-button
type="info"
@click="handleMixin"
>
Info
</el-button>
</div>
</template>
<script>
// 首先导入Mixinvue
import Mixin from '@/views/test/Mixin.vue'
import {
getCurrentInstance
} from 'vue'
export default ({
name: 'About',
components: {
},
// 局部混入
mixins: [Mixin],
setup () {
const { proxy } = getCurrentInstance()
console.log('this proxy', proxy)
const handleMixin = () => {
console.log('mixinData', proxy.mixinData)
const mixfun = proxy.mixinFunction()
console.log('mixinData', mixfun)
}
return {
handleMixin
}
}
})
// 全局混入 【Mixin 也可以进行全局注册。使用时格外小心！一旦使用全局 mixin，它将影响**每一个**之后创建的组件 (例如，每个子组件)】
// 新建 Mixin.vue 组件同上
// 新建 Mixin.js文件
import mixin from '@/views/test/Mixin.vue'
export default {
mixins: [mixin]
}
// 在mian.js中配置如下
// 1. 首先引入Mixin.js组件
import mixin from './views/test/Mixin'
const app = createApp(App)
app.mixin(mixin)
</script>
4. 注意：
Mixin全局注册。可能会造成数据污染，推荐布局引入方式。
当组件和 mixin 对象含有同名选项时，以当前自身组件数据优先。
参考链接：
