Vue mixin的使用

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

一、局部混入：

//①：新建minxins.js文件    minxins.js   
 
export default {
    data() {
        return {
            message: '混入对象', 
        }
    },
    created() {
      this.bar() //可调用组件中的方法 也可获取组件中的对象
    },
    methods: {
        foo: function () {
            console.log('foo')
        },
        conflicting: function () {
            console.log('from mixin')
        }
    }
}

// 2. 新建一个组件
import minxins  from "./common/minxins";
export default{
    mixins: [minxins],
    data(){
        return{
             message:'使用混入对象的组件' 
        }
    },
    created(){
      this.foo();
      this.bar();
      this.conflicting(); 
    }, 
    methods:{
      bar() {
        console.log("bar");
      },
    conflicting() {
      console.log("from com");
    },
 }
// 控制台结果：
//bar
//foo
//bar
//from com
// 如果mixin种的data与组件中的data重复，优先使用data中的属性
// 会优先执行mixin中的生命周期
// methods中的方法重复的话也会依次调用

　一、全局混入：

　　main.js中

　　 1.import mixin from '自己的文件路径/mixin';

        2.Vue.mixin(mixin);