Mixins

Mixin对象能够使用组件的任何属性（data，mounted，created，update等），而且当组件使用mixin时，这个mixin的所有信息也会混合到这个组件里，这个组件就能够访问到所有mixin的属性就像申明在自己对象中一样。

沿用 《Vue 3.0 特性指南（一） - 为什么要引入组合式 API？》 中的搜索和排序的例子，想使用 Mixins ，需要先创捷它们各自的 Mixin 对象，然后在组件中引入 ：

const productSearchMixin = {
    data() {
        return {
            // 搜索变量
        };
    },
    methods: {
        // 搜索方法
    },
};
const resultSortMixin = {
    data() {
        return {
            // 排序变量
        };
    },
    methods: {
        // 排序方法
    },
};
export default {
    mixins: [productSearchMixin, resultSortMixin],
};

这样代码就是按照功能来组织的，但是 Mixins 也有缺点：

Mixin Factories

Mixin 工厂函数可以根据传入的配置返回定制的 mixin 对象，举个栗子：

// mixins/factories/search.js
export default function searchMixinFactory({ ... }) {
    // 搜索功能
}

// mixins/factories/sorting.js
export default function sortingMixinFactory({ ... }) {
    // 整理功能
}

// search.vue
import searchMixinFactory from '@mixins/factories/search';
import sortingMixinFactory from '@mixins/factories/sorting';

export default {
    mixins: [
        productSearchMixin({
            namespace: 'productSeatch',
            // ...搜索配置参数
        }),
        resultSortMixin({
            namespace: 'resultSorting',
            // ...排序配置参数
        })
    ],
};

这样一来，我们可以通过传递不同配置来获得我们需要特定场景下的 mixin 对象，而搜索和排序中通用的逻辑得以复用；功能互相作用也有了更清晰的关系。但是使用这种方法需要注意的：

Scoped Slots

Vue2 中第三种逻辑复用的方法是使用作用域插槽，即 Scoped Slots，首先创建三个文件：

// components/generic-search.vue
<script>
export default {
    props: ['getResults'],
    // 搜索功能
}
</script>

<template>
    <div>
        <slot v-bind="{ query, results, run }" />
    </div>
</template>
// components/generic-sorting.vue
<script>
export default {
    props: ['input', 'options'],
    // 
}
</script>

<template>
    <div>
        <slot v-bind="{ options, input, output }" />
    </div>
</template>
// search.vue
...
<template>
    <GenericSearch :get-results="getProducts" v-slot="productSearch">
        <GenericSorting
            :input="productSearch.results"
            :options="resultSortingOptions"
            v-slot="resultSorting"
        >
        ...
</template>

我们在 search.vue 中使用这些组件发送特定产品搜索的配置，这几乎解决了所有 mixins 的缺点，但是也有其特有的缺陷：

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/9682