Vue 混入（mixins和Vue.mixin）

1.mixins和Vue.mixin

• mixins

混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

这是官网对混入的解释，按照自己理解mixins就是定义一个对象包含公共的方法或者数据，计算属性等,然后混入到多个组件中使用,方便管理与统一修改。

• Vue.mixin
  全局注册混入对象。注意使用！ 一旦使用全局混入对象，将会影响到所有之后创建的 Vue 实例。使用恰当时，可以为自定义对象注入处理逻辑。

2.mixins

mixins.png

• 2.1 创建一个要混入的对象(commonMixin.js)

export  const common={
  methods:{
      sayHello:()=>{
        console.log('hello');
      }
    }
  }

• 2.2 组件中使用刚刚创建的混入

import {common} from '../assets/js/commonMixin.js'

 export default{
   data(){
    return{
    }
   },
   mixins:[common],
   mounted(){
      this.sayHello();
   }
 }

注意：当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。混入

3.Vue.mixin

Vue.mixin.png

Vue.mixin({data(){
  return{
    mix:"vue mix"
  }
}})

阅读

vue-mixins使用注意事项和高级用法
在 Vue.js 中使用Mixin