3×0 精读Vue官方文档 – 组合 – 混入

精读 Vue 官方文档系列 ?

基础

Mixin（混入）指的是向目标组件中混入能够在多个组件间进行复用的逻辑或功能。

简单粗暴的理解，可以将“混入对象”等同为组件的纯逻辑部分（SFC 中的 <script> 部分），然后将其抽离到一个独立的文件中，等待分发到别的组件中进行混合，以实现功能的复用。

混入对象可以包含任意的组件选项，这些选项会按照恰当的方式与目标组件的选项进行”混合合并“。

混入对象中的方法与数据可以在多个组件中共用但是不能共享。

一个简单的混入对象：

//src/mixins/sayHelloMixin.js
export default {
    data() {
        return {
            message: 'hello!'
        }
    },
    created() {
        console.log(this.message)
    }
}
复制代码

导入 sayHelloMixin，然后传入到目标组件的 mixins 选项中进行局部注册。

import sayHelloMixin from "../mixins/sayHello";
export default {
    name:'Hello',
    mixins:[sayHelloMixin]
}
复制代码

或者使用 Vue.extend() 方法基于混入对象创建一个完整的全新的组件对象。

import sayHelloMixin from "../mixins/sayHello";
import Vue from 'vue'
export default Vue.extend({mixins: [sayHelloMixin]})
复制代码

选项合并

混入对象与目标组件混合的规则如下：

• 数据方法会进行递归合并数据的键值对，如果键发生冲突，则优先使用组件中的数据。
• 钩子函数会被合并成一个数组，因此都将被调用，注意的是混入对象的钩子在组件自身的钩子之前执行。
• 值为对象的组件选项会进行合并，对象键名冲突时，取组件对象的键值对。

全局混入

使用 Vue.mixin() 方法来注册全局的混入对象。

应当避免使用全局混入的方式。
这里主要注意采用不同方式注册的混入对象的执行优先级：组件自身选项 → 局部注册的混入对象 → 全局注册的混入对象

自定义选项合并策略

通过 Vue.config.optionMergeStrategies.[myOption] 可以自定义混入对象与组件对象中某个选项的合并策略。

其中 myOption 是一个占位符，其实际名称应当是要合并的选项名。

对于多数值为对象的选项，可以使用与 methods 相同的合并策略：

var strategies = Vue.config.optionMergeStrategies
strategies.myOption = strategies.methods
复制代码

示例说明

设想，现在有两个组件，Modal 与 Tooltip，虽然它们展现的形式上存在差异，但存在着相同的交互逻辑，例如都有着切换显示隐藏的功能。

此时，按照混入的目标与定义，我们便可以将能复用的功能抽离到一个 mixin 对象中了。

var toggleMixin = {
    data() {
        return {
            show: false
        }
    },
    methods: {
        toggle() {
            this.show = !this.show;
        }
    }
}
复制代码

然后分别在 Modal 与 Tooltip 中使用：

<!--Modal.vue-->
export default {
    name:'Modal',
    mixins:[toggleMixin],
}

<!--Tooltip.vue-->
export default {
    name:'Modal',
    mixins:[toggleMixin],
}
复制代码