Vue.js学习（三）：mixins混合对象的使用

比眉伴天荒 2022-06-02 10:35 241阅读 0赞

我对mixins的理解是，有点像注册了一个vue的公共方法，可以绑定在多个组件或者多个Vue对象实例中使用。另一点，类似于在原型对象中注册方法，实例对象即组件或者Vue实例对象中，仍然可以定义相同函数名的方法进行覆盖，有点像子类和父类的感觉。下面主要参考网上的一些资料，对mixins的实际作用做介绍：

# **1、方法的复用** #

Vue.component('child',{ template:`<h1 @click="foo">child component</h1>`, methods:{ foo(){ console.log('Child foo()'+this.msg++) } } }) Vue.component('kid',{ template:`<h1 @click="foo">kid component</h1>`, methods:{ foo(){ console.log('Kid foo()'+this.msg++) } } })

在借助mixins之前，在两个不同的组件的组件中调用foo方法，需要重复定义，倘若方法比较复杂，代码将更加冗余。若借助mixins，则变得十分简单：

let mixin={ data(){ return{ msg:1 } }, methods:{ hello(){ console.log('hello from mixin!----'+this.msg++) } } } var child=Vue.component('child',{ template:`<h1 @click="foo">child component</h1>`, mixins:[mixin] }) Vue.component('kid',{ template:`<h1 @click="foo">kid component</h1>`, mixins:[mixin] })

虽然此处，两个组件用可以通过this.msg引用mixins中定义的msg，但是，小编尝试过，两个组件引用的并不是同一个msg，而是各自创建了一个新的msg。如果在组件中定义相同的data，则此处会引用组件中的msg，而非mixins中的。

# **2、方法的覆盖  ** #

如果在引用mixins的同时，在组件中重复定义相同的方法，则mixins中的方法会被覆盖。

var child=Vue.component('child',{ template:`<h1 @click="foo">child component</h1>`, mixins:[mixin], methods:{ foo(){ console.log('Child foo()'+this.msg++) } } })

此时，若单击h1标签，则在控制台中打印"Child foo() 1" 3、合并生命周期此时，若单击h1标签，则在控制台中打印"Child foo() 1"

# **3、合并生命周期** #

let mixin={

mounted(){ console.log('mixin say hi')//先输出 }, data(){ return{ msg:1 } }, methods:{ foo(){ console.log('mixin foo()'+this.msg++) } } } let vm=new Vue({ el:"#app", data:{ msg: 2 }, mounted: function(){ console.log('app say hi')//后输出 }, methods:{ foo(){ console.log('Parent foo()'+this.msg) } } })