混入 (mixin) ,混入对象将被“混合”进入组件。 实现功能和逻辑的复用。
定义一个混入对象
const mymix={
data:function(){
return {
aaa:'111111111111',
bbb:'2222222222'
}
},
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
export default mymix
组件内部引用混入
<template>
<div class="about">
<div>
<h1 >{{aaa}}</h1>
</div>
</div>
</template>
<script>
import Vue from 'vue'
import mymix from '../mixins/mymix'
export default {
name: 'About',
components: {
},
mixins:[mymix],
mounted(){
}
}
</script>
选项合并
1、数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先
2、同名钩子函数将合并为一个数组,因此都将被调用。混入对象的钩子将在组件自身钩子之前调用。
3、值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。
全局混入
Vue.mixin({
created: function () {
var myOption = this.$options.myOption
if (myOption) {
console.log(myOption)
}
}
})