Vue.mixin
混入 (mixin) 提供了一种非常灵活的方式,来分发 Vue 组件中的可复用功能。
数据对象在内部会进行递归合并,并在发生冲突时以组件数据优先。
同名钩子函数将合并为一个数组,都将被调用。混入对象的钩子先调用,组件定义钩子后调用。
值为对象的选项,例如 methods
、components
和 directives
,将被合并为同一个对象。两个对象键名冲突时,取组件对象的键值对。
混入发生在生命周期初始化等等之前,作为options合并,合并后才开始其它的初始化,所有混入不影响data等等监听和响应, 也不会出现因为引入同一mixin出现共享属性的情况。
混入方式
局部混入
在组件中引入一个混入对象,通过组件的mixins绑定
export const mixin={ data(){ return { number:1 } } }
//组件
import {mixin} from "xxx/mixin" export default {
data(){
return {
} },
mixins:[mixin],
...
} </script>
全局引入
通过Vue.mixin(混入对象)
Vue.mixin({ created: function () { console.log('global mixin created') } })
选项合并
混入属性
- 混入属性的定义方式跟Vue实例定义属性的方式一样data(){return{xxx}}
- 当混入对象定义属性组件中未定义,混入后组件可使用此属性
- 当组件和混入对象定义同名属性,混入后使用组件定义的属性,忽略混入
export const mixin={ data(){ return { number:1 } } }
选择使用mixin的组件,如果没有number属性,混入后可以使用number属性;如果有number属性,混入后被过滤掉,以组件定义的number属性为主
混入自定义方法
- 混入方法的定义方式跟Vue实例定义方法的方式一样methods:{ func() {}}
- 当混入对象定义方法组件中未定义,混入后组件可使用此方法
- 当组件和混入对象定义同名方法,混入后使用组件定义的方法,忽略混入
//mixin
export const mixin={ methods:{ func(){ console.log("mixin func") } } }
// 组件 import {mixin} from "xxx/mixin" export default { mixins:[mixin], mounted(){ this.func(); }, methods:{ func(){ console.log("component func"); } } } </script>
当组件和混入对象定义同名方法:组件挂载后,执行this.func(), 控制台只会打印出 "component func",混入的func方法被忽略。
混入生命周期钩子
- 同名钩子函数将合并为一个数组,因此都【将被调用】。
- 【混入对象的钩子】先执行,再到组件同名的钩子执行。
export const mixin={ created(){ console.log("mixin created") } }
// 组件 <script> import {mixin} from "xxx/mixin" export default { mixins:[mixin], created(){ console.log("component created"); } } </script>
当组件和混入对象定义同名生命周期钩子: 组件实例化后,同名钩子,混入对象定义执行后,组件定义的接着执行。以上代码控制台会先打印:
mixin created component created