简介
Mixins 是 Vue.js 中用于组件代码重用的一种机制。它允许您将一组选项混合到多个 Vue 组件中，以实现代码的重用和组合。在本指南中，我们将深入探讨 Vue mixins 的概念、用法以及最佳实践。
概念理解
Mixins 允许您将可重用的功能组合到多个组件中，而不需要继承。这是通过在组件的选项中声明一个 mixins 数组来实现的。
创建 Mixins
要创建一个 mixin，可以创建一个普通的 JavaScript 对象，也可以创建一个返回对象的函数，将你想要混合的选项放入其中。
对象形式的 mixin：
// myMixin1.js
export default {
data() {
return {
message: 'Hello from Mixin!'
}
},
methods: {
greet() {
console.log(this.message);
}
}
}
函数形式的 mixin：
// myMixin2.js
export default function(ref) {
return {
methods: {
focus() {
this.$refs[ref].focus();
}
}
};
};
应用 Mixins
1、对象形式的 mixin：
要将 mixin 应用到组件中，只需在组件的 mixins 选项中引用它。
// MyComponent1.vue
<template>
<div><button @click="greet">Greet</button></div>
</template>
<script>import myMixin1 from './myMixin1.js';
export default {
mixins: [myMixin1],
}
</script>
2、函数形式的 mixin：
// MyComponent.vue
<template>
<div><button @click="greet">Greet</button></div>
</template>
<script>import myMixin2 from './myMixin2.js';
export default {
mixins: [myMixin2（'ref'）],
}
</script>
Mixins 的数据和方法
Mixin 可以包含任何组件选项，包括 data、methods、computed 等。这些选项将被混合到组件中，与组件自身的选项合并。
// myMixin.js
export const myMixin = {
data() {
return {
message: 'Hello from Mixin!'
}
},
methods: {
greet() {
console.log(this.message);
}
}
}
实际场景应用
Mixins 在以下情况下特别有用：
● 当多个组件需要相同的功能时。
● 当您希望在组件之间共享功能，但不需要创建一个全局组件时。
● 当您希望通过 mixins 向现有组件添加功能，而无需修改组件本身的代码。
根据自己的需求和场景，选择适合的 mixin 写法非常重要。如果需要多个组件共享相同的 mixin 行为，并且不需要根据参数进行动态变化，那么直接抛出对象的方式是最简单和直接的。但如果需要 mixin 的行为根据传入的参数进行动态变化，那么使用函数来返回对象的方式更加灵活和适用。
避免命名冲突
注意命名，确保 mixins 的命名不会与组件本身或其他 mixins 冲突。