如何巧妙运用Vue Mixins实现组件间代码复用与功能共享？

本文共计915个文字，预计阅读时间需要4分钟。

%E6%B7%B7%E5%85%A5%E5%8F%91%E6%94%B9%E7%89%88%E5%BC%80%E5%A4%B4%E5%86%85%E5%AE%B9：

%E2%80%9C%E6%B7%B7%E5%85%A5%E5%8F%91%E6%94%B9%E7%89%88%E7%BB%99%E4%BD%A0%E6%8F%90%E4%BE%9B%E4%BA%86%E4%B8%80%E7%A7%8D%E9%9D%9E%E5%B8%B8%E7%81%B5%E6%B4%BB%E7%9A%84%E6%96%B9%E5%BC%8F%EF%BC%8C%E4%BD%BF%E7%94%A8Vue%E7%BB%84%E4%BB%B6%E5%AE%9E%E7%8E%B0%E5%8F%AF%E5%A4%8D%E7%94%A8%E5%8A%9F%E8%83%BD%E3%80%82%E4%BD%A0%E5%8F%AF%E4%BB%A5%E4%BD%BF%E7%94%A8%E6%B7%B7%E5%85%A5%E5%AF%B9%E8%B1%A1%E6%9E%84%E5%BB%BA%E9%80%82%E5%90%88%E4%BD%A0%E7%9A%84%E7%BB%84%E4%BB%B6%E3%80%82%E6%97%B6%E5%80%99%E4%BD%A0%E4%BD%BF%E7%94%A8%E6%B7%B7%E5%85%A5%E5%AF%B9%E8%B1%A1%E3%80%8C%E6%B7%B7%E5%90%88%E3%80%8D%E5%85%A5%E5%8F%A3%E8%BE%93%E5%87%BA%E5%BA%94%E7%94%A8%E3%80%82%E2%80%9D

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

var Mymixin = { data: function(){ return { message: 'hello', foo: 'abc' } } } export default { mixins:[Mymixin], data(){ return{ message:'good', bar:'kiss' } }, created(){ console.log(this.$data) //bar: "kiss",foo: "abc",message: "good" },

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

<script> var Mymixin = { created: function(){ console.log('混入对象的钩子被调用') } } export default { mixins:[Mymixin], data(){ return{ message:'good', bar:'kiss' } }, created(){ console.log('组件钩子被调用') // 混入对象的钩子被调用 // 组件钩子被调用 } } </script>

值为对象的选项，

例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

<script> var Mymixin = { methods: { foo: function(){ console.log('foo') }, conflicting: function(){ console.log('from mixin') } } } export default { mixins:[Mymixin], created(){ this.foo() this.conflicting() this.bar() // foo // from self // bar }, methods:{ bar:function(){ console.log('bar') }, conflicting: function(){ console.log('from self') } } } </script>

全局混入

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

// 为自定义的选项 'myOption' 注入一个处理器。可在main.js中写入 Vue.mixin({ created: function () { var myOption = this.$options.myOption if (myOption) { console.log(myOption) } } }) 在任意组件里面都可以使用 new Vue({ myOption: 'hello!' }) // => "hello!" export default { myOption: 'hello!', }

请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。