一、 介绍

vue中提供了一种混合机制--mixins，用来更高效的实现组件内容的复用。

index.vue与mixin.js中的数据，计算属性，方法等将进行合并；

如果两者有相同的数据，index.vue文件将覆盖前者；

生命周期钩子入mounted之类的内容两者将都会执行，同名的生命周期钩子，mixin.js中的内容将先执行；

index.vue和mixin.js中的数据可以任意方式组合使用，但是为了提高封装性，请尽量避免在mixin.js中使用index.vue的数据或方法，可以在mixin.js中设置默认值，在index.vue中重写mixin.js中的内容；

index.vue可以引入多个mixin。

二、 使用

mixin.js

export default {

data () {

return {

data1: 'mixin1',

data2: 'mixin2'

}

},

computed: {

computed1 () {

return this.data1 + this.data2

},

computed2 () {

return this.data1 + this.data3

}

},

mounted () {

console.log('mixin中的mounted')

},

methods: {

handleMethod1 () {

console.log(

`mixin中的方法1，

data1：${this.data1}，

computed1：${this.computed1}`

)

},

handleMethod2 () {

console.log(

`mixin中的方法2，

data2：${this.data2}，

computed2：${this.computed2}`

)

}

}

}

index.vue

// 引入mixin

import Mixin from './mixin.js'

export default {

// 使用，放入一个数组

mixins: [Mixin],

data () {

return {

data1: 'index1',

data3: 'index3'

}

},

computed: {

computed1 () {

return this.data1 + this.data2

},

computed3 () {

return this.data2 + this.data3

}

},

mounted () {

console.log('组件中的mounted')

this.handleMethod1()

this.handleMethod2()

this.handleMethod3()

},

methods: {

handleMethod1 () {

console.log(

`组件中的方法1，

data1：${this.data1}，

computed1：${this.computed1}`

)

},

handleMethod3 () {

console.log(

`组件中的方法3，

data3：${this.data3}，

computed3：${this.computed3}`

)

}

}

}

执行结果

mixin中的mounted

组件中的mounted

组件中的方法1，data1：index1，computed1：index1mixin2

mixin中的方法2，data2：mixin2，computed2：index1index3

组件中的方法3，data3：index3，computed3：mixin2index3