基础1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16// 定义一个混合对象
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
};
// 定义一个使用混合对象的组件
var Component = Vue.extend({
mixins: [myMixin]
});
var component = new Component() // => "hello from mixin!"
选项合并
当组件和混合对象含有同名选项时，这些选项将以恰当的方式混合。比如，同名钩子函数将混合为一个数组，因此都将被调用。另外，混合对象的 钩子将在组件自身钩子 之前 调用 ：1
2
3
4
5
6
7
8
9
10
11var mixin = {
created: function () {
console.log('混合对象的钩子被调用')
}
}
new Vue({
mixins: [mixin],
created: function () {
console.log('组件钩子被调用')
}
})
小结
混合就是将方法放置在外部 然后在内部调用 内外同名的函数 内部会覆盖外部的函数
