混入是一种分发式组件可复用功能
分为混入对象 和使用混入对象的组件
// 定义一个混入对象
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!"
组件在created钩子执行时执行了myMixin里面的函数，说明混入对象已经成功混入组件中，合二为一了。
关键使用方法：
mixins: [myMixin]
注意事项
组件和混入对象含有同名选项
1.数据对象会在内部进行递归合并，如果由同名冲突以组件数据优先
`var mixin = {
data: function () {
return {
message: 'hello',
foo: 'abc'
}
}
}
new Vue({
mixins: [mixin],
data: function () {
return {
message: 'goodbye',
bar: 'def'
}
},
created: function () {
console.log(this.$data)
// => { message: "goodbye", foo: "abc", bar: "def" }
}
})
可以看到created钩子函数输出的data包含message，foo, bar，其中冲突的message的值是罪行的‘goodbye’
2.同名钩子函数将混合成一个数组，都将被调用。混入对象钩子函数的优先级高于混入的组件的钩子函数
3.值为对象的选项，如methods，components,和directives，将被混合为同一个对象。如果对象键名冲突时，取组件对象的键值对
