当你的 Vue 项目开始增长时，你可能会发现自己一遍又一遍地复制和粘贴数据、方法，如果你有类似的组件。
当然，你可以将所有这些单独的文件编写为一个组件，并使用 props 来自定义它们。
为了避免这项艰巨的任务，大多数人只是继续添加重复的代码。最好的 Vue 开发人员会知道有一个更好的解决方案——Vue Mixins。
解决方案 – Vue Mixins
值得庆幸的是，在 Vue 2 中，我们可以使用 Mixins——这是在不同组件之间共享代码的最简单方法之一
Mixin 对象可以使用——数据、挂载、创建、更新等——当一个组件使用 mixin 时，mixin 对象中的所有信息都将混合到组件中。
然后，组件可以访问 mixin 中的所有选项，就像您在组件本身中声明它一样。在举个例子之后，这将更有意义。
因此，让我们创建一个添加数据的 mixin、一个生命周期钩子和一个方法。
export default {
data() {
return {
msg: 'Hello World',
}
},
created: function () {
console.log('Printing from the Mixin')
},
methods: {
displayMessage: function () {
console.log('Now printing from a mixin function')
},
},
}
然后，在任何 Vue 组件中，我们都可以导入这个 mixin 并使用它！
import mixin from "./mixin.js";
new Vue({
mixins: [mixin],
created: function () {
console.log(this.$data);
this.displayMessage();
},
});
// EXPECTED OUTPUT
// => "Printing from the Mixin"
// => {msg: ‘Hello World’}
// => "Now printing from a mixin function"
如您所见，使用 mixin 后，该组件包含 mixin 中的所有数据，并且使用 访问它。您还可以使用变量而不是单独的文件来定义 mixin。
此外，请务必注意，在使用钩子时，mixin 钩子将在组件的钩子之前调用。
如果存在命名冲突会怎样？
当 mixin 中存在与组件中的选项同名的数据、方法或任何组件选项时，可能会在组件及其 mixin 之间进行命名。
如果发生这种情况，则遗嘱中的属性优先。
例如，如果组件和 mixin 中都有一个数据变量 — 将返回组件中定义的值。在代码中，这看起来像：titlethis.title
mixin.js
export default {
data() {
title: 'Mixin'
},
}
组件.vue
<script>
import mixin from './mixin.js'
export default {
mixins: [mixin],
data () {
title: ‘Component’
},
created: function () {
console.log(this.title)
}
}
// Output: "Component"
</script>
来自我们组件的数据优先于默认的混合值。
作者：terry，如若转载，请注明出处：https://www.web176.com/news/frontend/28612.html
支付宝 
微信 