Skip to content

Mixin 混入

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

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

基础案例

hello-world.vue

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

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

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

mixin.js

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

预览效果

选项合并

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

hello-world.vue

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

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

预览效果

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