Mixin 混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

怎么理解呢，就是每一个组件都会有一些选项 data、computed、methods …对吧，假设我有 10 个组件，每一个组件内都有一个相同的 methods 方法，那我就将这个可复用的方法抽离到 mixin 文件中，然后在引入进来。这样我就不需要每个组件都编写重复的 methods 方法了，data、mounted 等等的选项也是如此。

基础案例

hello-world.vue

<template>
    <div class="home">
        {{ name }}
    </div>
</template>

<script>
import mixin from './mixin.js'

export default {
    mixins: [mixin],
    data() {
        return {}
    }
}
</script>

mixin.js

export default {
    data() {
        return {
            name: 'xiaoming'
        }
    }
}

预览效果

选项合并

因为混入会把它本身的选项和组件的选项一起合并，那么也就是说会发生一些冲突，例如混入中的文件含有 name 属性，而组件的选项 data 中也存在 name 属性，那页面渲染的时候会以哪个为准呢？接下来进行测试一下。

hello-world.vue

<template>
    <div class="home">
        {{ name }}
    </div>
</template>

<script>
import mixin from './mixin.js'

export default {
    mixins: [mixin],
    data() {
        return {
            name: 'libai'
        }
    }
}
</script>

mixin.js

export default {
    data() {
        return {
            name: 'xiaoming'
        }
    }
}

预览效果

可以看出来是以组件选项的为准，这里只举例了选项 data 的冲突，其他选项 methods、computed、mounted 也是如此，小伙伴们可以自行去测试一下。在开发的时候需要多留意一下冲突的情况。

原文链接：菜园前端