Vue2 中三种逻辑复用方法
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 也有缺点：
需要注意命名冲突，具体可以看 vue 官网选项合并这部分：混入 - Vue.js
不清楚这些 mixins 如何互相作用的，如果 mixins 嵌套，会很难理解
不可定制，并没有那么容易进行复用，按上面的例子，项目中如果需要筛选产品、用户以及评论之类的场景，就要编写不一样的 mixin 对象
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 对象，而搜索和排序中通用的逻辑得以复用；功能互相作用也有了更清晰的关系。但是使用这种方法需要注意的：
严格的命名空间限制
还是需要看看 mixins 的内部逻辑，以求知道它们具体做了什么事
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://www.cnblogs.com/jsmax/p/13721063.html
本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！
