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