混入基础
一个混入对象可以包含任意组件选项。
当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项
<script>
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
var Component = Vue.extend({
mixins: [myMixin]
})
var component = new Component();
</script>
选项合并
- 当组件和混入对象含有同名选项时,这些选项将以恰当的方式进行“合并”
比如,数据对象再内部会进行递归合并,并在发生冲突时以组件数据有先。
<script>
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)
}
})
</script>
- 混入对象的钩子将在组件自身钩子之前调用
<script>
var mixin = {
created: function() {
console.log("混入对象的钩子先被调用");
}
}
new Vue({
mixins: [mixin],
created: function(){
console.log("组件钩子后被调用")
}
})
</script>
- 值为对象的选项,例如methods,components 和directives,
将被合并为同一个对象,两个对象键名冲突时,取组件对象的键值对
<script>
var mixin = {
methods: {
foo: function () {
console.log('foo')
},
conflicting: function () {
console.log('from mixin')
}
}
}
var vm = new Vue({
mixins: [mixin],
methods: {
bar: function () {
console.log('bar')
},
conflicting: function () {
console.log('取组件对象的键值对')
}
}
})
vm.foo()
vm.bar()
vm.conflicting()
</script>
全局混入
<script>
Vue.mixin({
created:function(){
var myOption = this.$options.myOption
if(myOption){
console.log(myOption)
}
}
})
new Vue({
myOption: 'hello'
})
</script>