Vue-mixin

Vue提供了一种非常灵活的方式,来分发Vue组件中的可复用功能 – mixin。
本文主要介绍mixin的使用方法。

1定义混入对象

例如:

1
2
3
4
5
6
7
8
9
10
11
var mixin = {
created: function () {
message: 'hello',
foo : 'abc'
},
methods: {
hello: function () {
console.log('hello')
}
}
}

2选项合并

例如:

1
2
3
4
5
6
7
8
9
10
11
12
new Vue({
mixins: [mixin],
data () {
return {
message: 'goodbye',
bar: 'def'
}
},
created () {
console.log(this.$data)
// { message: "goodbye", foo: "abc", bar: "def" }
}

注: 当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”。
比如,数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
同名钩子函数将合并为一个数组,因此都将被调用。另外,混入对象的钩子将在组件自身钩子之前调用。
值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。

扫一扫,请老师喝水